File: PostInput.jsx

import {useState, useEffect} from "react"
import MentionSelect from "./MentionSelect";
export default function PostInput() {
const [message, setMessage] = useState("")
const [isAtSymbol, setIsAtSymbol] = useState(false)
const [taggedUser, setTaggedUser]=useState(null);
const [cursorPosition, setCursorPosition] = useState({start:0, end:0});
const updateCursorPosition = (event) => {
setCursorPosition({top:event.target.selectionStart,end:event.target.selectionEnd});
};

useEffect(()=>{
if(message.includes('@')){
  setIsAtSymbol(true);
}
else{
  setIsAtSymbol(false);
}
},[message])


console.log(message);
console.log(cursorPosition);


return (
<div className=' p-3 flex flex-col items-center justify-center gap-7 h-auto'>
  <div className="relative">
  <textarea rows={4} cols={60} placeholder="Create a post ..." className="resize-none rounded-md text-gray-600 outline-none p-3 " value={message} onChange={(e)=> setMessage(e.target.value)} onKeyUp={updateCursorPosition}></textarea>
  {isAtSymbol && <MentionSelect taggedUser ={taggedUser} setTaggedUser={setTaggedUser} setIsAtSymbol={setIsAtSymbol} cursorPosition={cursorPosition}/>}
</div>
<div className="relative left-60">
<button className="bg-customPink px-10 py-2 rounded-md text-black font-bold absolute right-0">Post</button></div>
</div>
 )}

File: MentionInput.jsx

  import {useState} from "react";

  const users = ['Tommy','Steve','Danny','Alex','Jones','Charlie','Alexis','Cherie','Reagan','Lacy','Angela','Codi','Gia','Gianna','Luna','Dee'];


   export default function MentionSelect({taggedUser, setTaggedUser, setIsAtSymbol, cursorPosition}) {
   const [filteredUsers, setFilteredUsers] = useState([]);


    const handleInputChange = (e) => {
    // Getting the Input Value
    const inputValue = e.target.value;

    if(inputValue !== ''){

    const result = users.filter((user) =>
        user.toLowerCase().includes(inputValue.toLowerCase()));
    setFilteredUsers([...result]);
}else{
    setFilteredUsers([]);
}

}

function HandleTag(e){
setTaggedUser(e.target.value);
setIsAtSymbol(false);
}

 console.log(filteredUsers);
 console.log(taggedUser);

 return (
 <div className="w-auto h-auto max-h-48 border-solid border-2 border-black absolute top- 
 3 z-20 p-2 bg-white overflow-y-auto overflow-x-hidden" style={{ left: `${cursorPosition.end*3}px` }}>
 <input type="text" className="rounded-md p-1" onChange={handleInputChange} />
 { filteredUsers.length > 0 && <div className="mt-2 z-20">

{filteredUsers.map((user)=>(
    <div className="flex justify-center items-center gap-7 p-2 text-black hover:bg-slate-600 hover:text-white" key={user}>
    <span className='bg-red-600  rounded-full w-9 h-9 text-center font-semibold p-1'>{user.at(0)}</span>
    <option className='font-semibold hover:cursor-pointer mt-1' value={user} onClick={HandleTag}>{user}</option>
    </div>
))}
</div>}
</div> )}

I am trying to display the MentionInput component over the PostInput component and mainly it should appear just next to the active cursor position and also at the right line (First Line, Second Line).

But here I am not able to achieve it.

What’s the issue in the code?