React Sticker Input Component

import React, { useState, useRef } from 'react' import { Formik, Form, Field, ErrorMessage } from "formik"; import * as yup from 'yup' import { PsotUserComment, PostuserCommentReplay } from '../../../../core/Services/api/CourseComment'; import { useParams, useSearchParams, useNavigate } from 'react-router-dom'; import toast, { Toaster } from 'react-hot-toast'; import EmojiPicker from 'emoji-picker-react'; const SendMessage = ({ getCommentId }) => { const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [activeField, setActiveField] = useState('description'); // حالت پیشفرض const descriptionRef = useRef(null); const titleRef = useRef(null); const { id } = useParams() const [EditMode, setEditMode] = useSearchParams() const getEditMode = EditMode.get("EditMode") const Onsubmit = async (values) => { if (!id || !values.title?.trim() || !values.description?.trim()) { alert("لطفاً همه فیلدها را پر کنید!"); return; } if (getEditMode === "true") { const PostCommentRelayDatas = new FormData() PostCommentRelayDatas.append("CommentId", getCommentId) PostCommentRelayDatas.append("CourseId", values.CourseID) PostCommentRelayDatas.append("Title", values.title.trim()) PostCommentRelayDatas.append("Describe", values.description.trim()) const PostCommentRelpay = PostuserCommentReplay(PostCommentRelayDatas) if (PostCommentRelpay.message === "عملیات با موفقیت انجام شد.") { toast.success("عملیات با موفقیت انجام شد.") } else { toast.error("عملیات با موفقیت انجام نشد.") } setEditMode({}) } else { const PostCommentDatas = new FormData() PostCommentDatas.append("CourseId", values.CourseID) PostCommentDatas.append("Title", values.title.trim()) PostCommentDatas.append("Describe", values.description.trim()) const PostComment = await PsotUserComment(PostCommentDatas) if (PostComment.message === "عملیات با موفقیت انجام شد.") { toast.success("عملیات با موفقیت انجام شد.") } else { toast.error("عملیات با موفقیت انجام نشد.") } } } const handleEmojiClick = (emojiData) => { const fieldRef = activeField === 'title' ? titleRef : descriptionRef; if (fieldRef.current) { const currentValue = fieldRef.current.value; fieldRef.current.value = currentValue + emojiData.emoji; setShowEmojiPicker(false); } }; return ( <> <Toaster /> <Formik initialValues={{ title: "", description: "", CourseID: id }} onSubmit={(values) => Onsubmit(values)} > <Form> <div className="max-w-[300px] w-full flex h-[72px] items-center justify-center border border-blue-500 m-auto gap-5 rounded-3xl relative"> <div className="flex flex-row"> <button type="submit" className="w-[40px] h-[40px] rounded-full bg-blue-500 flex items-center justify-center"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.5399 2.54403C15.7249 0.589386 2.07223 5.37758 2.0835 7.12575C2.09629 9.10817 7.41524 9.718 8.88949 10.1317C9.77608 10.3803 10.0135 10.6353 10.2179 11.565C11.1437 15.7753 11.6086 17.8695 12.668 17.9162C14.3567 17.9909 19.3112 4.45158 17.5399 2.54403Z" stroke="#FCFCFC" strokeWidth="1.5" /> <path d="M9.5835 10.4167L12.5002 7.5" stroke="#FCFCFC" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> </svg> </button> <button type="button" className="w-[40px] h-[40px] rounded-full flex items-center justify-center" onClick={() => setShowEmojiPicker(!showEmojiPicker)} > <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.99984 18.3334C14.6022 18.3334 18.3332 14.6025 18.3332 10.0001C18.3332 5.39771 14.6022 1.66675 9.99984 1.66675C5.39746 1.66675 1.6665 5.39771 1.6665 10.0001C1.6665 14.6025 5.39746 18.3334 9.99984 18.3334Z" stroke="#3772FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M6.6665 12.5C7.4266 13.512 8.63675 14.1667 9.99984 14.1667C11.3629 14.1667 12.5731 13.512 13.3332 12.5" stroke="#3772FF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M6.67398 7.5H6.6665M13.3332 7.5H13.3257" stroke="#3772FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg> </button> </div> <div className="flex flex-col"> <Field innerRef={titleRef} name="title" className="font-weight-5 font-size-small text-Gray-8 border-none outline-0" placeholder="عنوان نظر خود را بنویسید" onClick={() => setActiveField('title')} /> <div className="border-b w-full text-Gray-4"></div> <Field innerRef={descriptionRef} name="description" className="font-weight-5 font-size-small text-Gray-8 border-none outline-0" placeholder="متن نظر خود را بنویسید" onClick={() => setActiveField('description')} /> </div> {showEmojiPicker && ( <div className="absolute bottom-[-350px] right-0 z-10"> <EmojiPicker onEmojiClick={handleEmojiClick} width={300} height={350} searchDisabled /> </div> )} </div> </Form> </Formik> </> ) } export default SendMessage اقا اصلا داخل filed ها نشون نمیده من میخوام کاربر ببینه استیکر رو