Hey um for some reason i am saving the x and y of a user highlight of text, however the X is dead on but the Y is completely broken? Also setting the Y cuases issues see where it assigned and used below:   const handleMouseUp = (event: React.MouseEvent) => {
    const selection = window.getSelection();
    if (!(selection && selection.toString() && !annotationVisible && selection.anchorNode)) { 
      return;
    }
  
    const selectedText = selection.toString();
    const lenst = selectedText.length;
    const range = selection.getRangeAt(0);

    
    //For annotation positioning
    const rect = range.getBoundingClientRect();
    setAnnotationPosition({
      top: rect.bottom + window.scrollY,
      left: rect.right + window.scrollX - 12 // 10px padding
    }); {annotationVisible && (
                    console.log("annot visisble!"),
                    <div 
                    ref={annotationRef} 
                    style={{
                      display: "block",
                      position: "absolute",
                      top: `${annotationPosition}px`,
                      left: `${annotationPosition.left}px`,
                      //zIndex: 1000,
                  }}
                  
                    > 
                              <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',
                                  'w-full',
                              
                                  '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;


                                    console.log(annotationKey)
                                    console.log("TEXT",message.text)

                                    setAnnotDict(prevDict => ({
                                      ...prevDict,
                                      [annotationKey]: { ...prevDict[annotationKey], annotation: target.value }
                                    }));
                                    
                                    setAnnotationVisible(false);
                                    setAnnotationKey("")
                                    target.value = "";
                                  }
                                  else if(e.key === "Escape"){
                                    setAnnotationVisible(false);
                                    setAnnotationKey("")
                                  }
                                }}
                          />
                      </div>
                      )}