here i provided my code. Right now no annotaiton box appears, can you make it appear right beside the highlighted text, i.e when a user highlights text in the message I want the annotation box to appear right beside it?  // State to manage the selected text and annotations
  const [selectedText, setSelectedText] = useState<string>("");
  const [annotations, setAnnotations] = useState<Annotation[]>([]);
  const [annotationIndex, setAnnotationIndex] = useState<number[] | null>([]);
  const annotationRef = useRef<HTMLDivElement>(null);

  // Function to handle text selection
  const handleMouseUp = () => {
    const selection = window.getSelection();
    if (selection && selection.toString()) {
      const text = selection.toString();
      const range = selection.getRangeAt(0);

      
    

    const rect = range.getBoundingClientRect();
    const annotationBox = annotationRef.current;
    if (annotationBox) {
      annotationBox.style.top = `${rect.bottom + window.scrollY}px`;
      annotationBox.style.left = `${rect.right + window.scrollX}px`;
    }
    
      <div ref={annotationRef}>
            <span className="bg-yellow-100">{selection?.toString()}</span> 
                <input
                type='text'
                style={{
                  fontSize: '14px', // Adjust the font size as needed
                  height: '2rem', // Adjust the height as needed
                  width: '200px', // Adjust the width as needed
                  padding: '0.5rem', // Adjust the padding as needed
                  lineHeight: '1.5', // Adjust the line height as needed
                  fontFamily: 'Arial, sans-serif' // Adjust the font family as needed
              }}
                className={cn(
                  'min-h-[1rem] md:min-h-[2rem]',
                  "w-auto",
                  'self-center',
                  'rounded',
                  'px-1 px-2',
                  'border',
                  'bg-danger-50',
                  'text-lg',
              
                  'border-secondary-400',
                  'transition ease-in-out',
                  'focus:border-secondary-700',
                  'focus:outline-none',
      
                  'placeholder-base'
                  
                )}
                  
                  placeholder="Add annotation . . ."
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      const target = e.target as HTMLInputElement;

                      addAnnotation(target.value);
                      
                      target.value = "";
                    }
                  }}
            />
        </div>
    }
  };
  
  // Function to add annotation
  const addAnnotation = (a: string) => {

  const selection = window.getSelection();
  if (selection){
    const range = selection.getRangeAt(0);
    const start = range.startOffset;
    const end = range.endOffset;

    const annot: Annotation = {
      text: selectedText.toString(),
      annotation: a,
      start: start,
      end: end
    };

    setAnnotations(prevAnnotations => [
      ...prevAnnotations,
      { text: selectedText.toString(), annotation: a, start: start, end: end }
  ]);
  }
  };