Estoy tratando de hacer un menú y al presionar fuera de él se cerrará y activará clearTimeout para que no se vuelva a cerrar si se vuelve a abrir.
De alguna manera, cuando presiono en el menú, esta condición siempre es cierta:

 if (document.activeElement !== menuRef.current) {//document.activeElement.id !== 'myField'

<div ref={menuRef} id="myField"> es el div envolvente del menú
Entonces no funciona.
¿Qué estoy haciendo mal aquí?

Todo en Codesandbox - Codesandbox

 export default function Example() { const { toggleMenu } = useMenuState({ transition: true }); let closeTimeMenu; const menuRef = useRef(null); useEffect(() => { function handleClickOutside() { setTimeout(() => { if (document.activeElement !== menuRef.current) {//document.activeElement.id !== 'myField' console.log(" !== menuRef"); clearTimeout(closeTimeMenu); window.onclick = toggleMenu(false); } }, 500); } document.addEventListener("mousedown", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, []); function handleClick() { //menuRef.current.focus(); or - document.getElementById('myField').focus(); } function timeout() { closeTimeMenu = setTimeout(function () { toggleMenu(false); }, 1500); } return ( <div ref={menuRef} id="myField"> <button onMouseEnter={() => { toggleMenu(true); clearTimeout(closeTimeMenu); }} onMouseLeave={() => timeout()} > Hover to Open </button> <ControlledMenu anchorRef={menuRef} onMouseEnter={() => { toggleMenu(true); clearTimeout(closeTimeMenu); }} onItemClick={() => { handleClick(); toggleMenu(false); }} onMouseLeave={() => timeout()} > <MenuItem>Save</MenuItem> <MenuItem>Close Window</MenuItem> </ControlledMenu> </div> ); }

Gracias