this code is refusing to position my annotation box to match that of the targetElement... why? {annotationVisible && (
                    console.log("annot visisble!"),

                  
                    
                              <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: '150%', // Adjust the line height as needed
                                fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                                minHeight: '1.6rem',
                                maxHeight: '3.2rem',
                                textOverflow: 'ellipsis',
                                position: 'absolute',
                                top: `${annotationPosition.top}px`,
                                left: `${annotationPosition.left}px`,
                                zIndex: 999999
                            }}
                                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 . . ."
                                maxLength={125}
                                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 }
                                    }));

                                    //Temporary dict for this single render.
                                    let ad = annotDict
                                    ad[annotationKey].annotation = target.value
                                    ad = sortAnnotDict(ad)
                              
                                    setSortAnnotDict(ad)
                                    
                                    setAnnotationVisible(false);
                                    setAnnotationKey("")
                                    target.value = "";
                                  }
                                }}
                          />
                      
                      )}  useEffect(() => {
    const targetElement = document.getElementById(annotationKey);

    console.log('elements')
    console.log(annotationKey)
    console.log(targetElement)

    const targetRect = targetElement?.getBoundingClientRect();
    annotationPosition.top = targetRect?.top||0 + window.scrollY;
    annotationPosition.left = targetRect?.left||0 + window.scrollX;

  }, [annotationKey]);