how do i saftely append the child and remove it? right now this code is casuing huge issues.   useEffect(() => {
    const targetElement = document.getElementById(annotationKey);

    let inputBox = document.createElement('input')
    if (annotationVisible){
    inputBox.type = 'text';
    //inputBox.value= value;
    //inputBox.onchange = (event) => handleChange(event as unknown as ChangeEvent<HTMLInputElement>);

    // Applying inline styles
    inputBox.style.fontSize = "14px";
    inputBox.style.height = "2rem";
    inputBox.style.width = "max-content";
    inputBox.style.padding = "0.5rem";
    inputBox.style.lineHeight = "150%";
    inputBox.style.fontFamily = "Arial, sans-serif";
    inputBox.style.font = "Arial, sans-serif";
    inputBox.style.minHeight = "1.6rem";
    inputBox.style.maxHeight = "3.2rem";
    inputBox.style.textOverflow = "ellipsis";
    inputBox.style.position = "absolute";
    inputBox.style.marginRight= '5px';
    inputBox.style.top = '50%'
    inputBox.style.transform = 'translateY(-50%)'
    inputBox.style.zIndex = '99999999999999';

    // Applying class names
    inputBox.className = [
      //"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",
      "hover:none"
    ].join(" ")

    inputBox.ariaHidden = 'true'

    inputBox.placeholder = 'Add annotation . . .';
    inputBox.maxLength = 125;

    // Adding event handler
    inputBox.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);
        // inputBox.textContent = "";
        // if (tooltip){tooltip!.textContent = "";}
        targetElement?.removeChild(inputBox)
        let tooltip = document.getElementById('tool' + annotationKey)
        tooltip!.textContent = "";
        setPreprocessedMessage(insertHighlightMarkers(message.text, ad)) //Set the preprocessed message with higlights
        setAnnotationVisible(false);
        setAnnotationKey('');
        console.log(targetElement?.childNodes)
        console.log('REMOVED', inputBox)
        console.log(targetElement?.childNodes)
      } else {
        let tooltip = document.getElementById('tool' + annotationKey)
        tooltip!.textContent += e.key;
      }
        
    
    }

    console.log("ADDED", inputBox)
    targetElement?.appendChild(inputBox)

    //targetElement?.appendChild(inputBox)
    // Optional clean up
    return () => {
      console.log("RETURN REMOVAL")
      if (targetElement && targetElement.contains(inputBox)) {
        targetElement.removeChild(inputBox);
        setPreprocessedMessage(insertHighlightMarkers(message.text, annotSortDict)) //Set the preprocessed message with higlights
        console.log('REMOVED2', inputBox)
        console.log(targetElement?.childNodes)
      }
    };
  } else{
    targetElement?.removeChild(inputBox);
  }
  
  }, [annotationVisible]);