React: mange dom hover custom hooks

useHover.ts

import { useEffect, useRef, useState, RefObject } from "react";
import { useComponentWillUnmount } from "~/hooks/common/useLifecycle";

export default function useHover<T extends HTMLElement>(): [
  RefObject<T>,
  boolean
] {
  let willunmount = false;
  useComponentWillUnmount(() => {
    willunmount = true;
  });

  const [isHovered, setIsHovered] = useState<boolean>(false);

  const ref = useRef<T>(null);

  const handleMouseEnter = () => {
    if (!ref.current || willunmount) {
      return;
    }
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    if (!ref.current || willunmount) {
      return;
    }
    setIsHovered(false);
  };

  useEffect(() => {
    ref.current?.addEventListener("mouseenter", handleMouseEnter);
    ref.current?.addEventListener("mouseleave", handleMouseLeave);
    return () => {
      ref.current?.removeEventListener("mouseenter", handleMouseEnter);
      ref.current?.removeEventListener("mouseleave", handleMouseLeave);
    };
  }, [ref.current]);

  return [ref, isHovered];
}