Hej, mam kod ktory po kliknieciu prawym przyciskiem myszy na zawartosc strony otwiera ContextMenu i tam mam przycisk "Kopiuj fragment". Po jego wcisnieciu moge myszka wybrac dowolny fragment strony (dodawany jest outline na hover) i po kliknieciu powinien sie skopiowac HTML tego fragmentu. Niestety cos w moim kodzie jest nie tak bo po kliknieciu teoretycznie state odpowiedzialny za to czy uzytkownik wlasnie wybiera jakis fragment jest ustawiany na false ale juz za chwile jest ponownie true i mouseover event jest cal czas aktywny. Tutaj moj kod, bede wdzieczny za pomoc


  const [isSelecting, setIsSelecting] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const prevRef = useRef<HTMLElement | null>(null);

  const handleMouseOver = (e: MouseEvent) => {
    let target = e.target as HTMLElement;
    let selectableTarget: HTMLElement | null = target.hasAttribute('data-type')
      ? target
      : null;
    while (selectableTarget === null && target.parentElement) {
      target = target.parentElement;
      selectableTarget = target.hasAttribute('data-type') ? target : null;
    }

    if (selectableTarget !== prevRef.current) {
      prevRef.current?.classList.remove(
        'outline-red-500',
        'outline-[1px]',
        'outline'
      );
      prevRef.current = selectableTarget;
      prevRef.current?.classList.add(
        'outline-red-500',
        'outline-[1px]',
        'outline'
      );
    }
  };

  const handleClick = () => {
    setIsSelecting((prev) => false);
    // await navigator.clipboard.writeText(prevRef.current?.outerHTML || '');
  };

  useEffect(() => {
    if (isSelecting) {
      ref.current?.addEventListener('mouseover', handleMouseOver);
      ref.current?.addEventListener('click', handleClick);
    } else {
      ref.current?.removeEventListener('mouseover', handleMouseOver);
      ref.current?.removeEventListener('click', handleClick);
    }
  }, [isSelecting]);

  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <div
          ref={ref}
          className='rich-html prose prose-sm dark:prose-invert md:prose-base lg:prose-lg'
        >
          {parse(html, options)}
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem asChild>
          <Button variant='ghost' onClick={() => setIsSelecting(true)}>
            Kopiuj fragment
          </Button>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
};