Suggestions do not stay above the cursor

[quinndumala]

Steps to reproduce:

1. Add a MentionsInput component with forceSuggestionsAboveCursor set to true.

2. Trigger the suggestions list.

   const fruitData = [
     { id: 0, display: "Apple - Red" },
     { id: 1, display: "Apple - Green" },
     { id: 2, display: "Banana" },
     { id: 3, display: "Orange" },
     { id: 4, display: "Mango" },
     { id: 5, display: "Pineapple" },
     { id: 6, display: "Grapes - Purple" },
     { id: 7, display: "Grapes - Green" },
     { id: 8, display: "Watermelon" },
     { id: 9, display: "Kiwi" },
     { id: 10, display: "Strawberry" },
     { id: 11, display: "Blueberry" },
   ];
   
   <MentionsInput
     autoFocus
     value={text}
     className="w-full text-sm shadow-inner no-blur rounded-xl active:border-0 focus:outline-none"
     onKeyDown={onKeyDown as any}
     onChange={onChange}
     style={defaultMentionStyle}
     placeholder={placeholder}
     a11ySuggestionsListLabel={"Suggested mentions"}
     forceSuggestionsAboveCursor={true}
   >
     <Mention data={fruitData} style={defaultMentionStyle} appendSpaceOnAdd trigger="@" />
   </MentionsInput>

Observed behavior: Suggestions aren't positioned on top of the cursor.

Expected behavior: Suggestions should be displayed on top of the cursor.