useHover react hook

Component.tsx

export const Component = () => {
	const servicesRef = useRef<HTMLAnchorElement>(null);
	const isServicesHovered = useHover(servicesRef);

	return (
		<Popover.Root open={isServicesHovered}>
			<Popover.Trigger asChild>
				<Link href="/" ref={servicesRef}>
					Services
				</Link>
			</Popover.Trigger>

			<Popover.Portal>
				<Popover.Content>
					<NavbarServicesDropdown />
				</Popover.Content>
			</Popover.Portal>
		</Popover.Root>
	);
};

useHover.ts

import { RefObject, useEffect, useState } from "react";

export function useHover<T extends HTMLElement = HTMLElement>(
	elementRef: RefObject<T>,
): boolean {
	const [value, setValue] = useState(false);

	useEffect(() => {
		const element = elementRef.current;
		if (!element) return;

		const handleMouseEnter = () => setValue(true);
		const handleMouseLeave = () => setValue(false);

		element.addEventListener("mouseenter", handleMouseEnter);
		element.addEventListener("mouseleave", handleMouseLeave);
		document.addEventListener("mouseleave", handleMouseLeave);

		return () => {
			element.removeEventListener("mouseenter", handleMouseEnter);
			element.removeEventListener("mouseleave", handleMouseLeave);
			document.removeEventListener("mouseleave", handleMouseLeave);
		};
	}, [elementRef]);

	return value;
}