Tengo un gancho personalizado para escuchar clics externos:

importar {useEffect, useRef, MutableRefObject} desde 'reaccionar'

 function useOnClickOutside(ref: MutableRefObject<HTMLElement | undefined>, handler: (ev: MouseEvent | TouchEvent) => void) { useEffect( () => { const listener = (event: MouseEvent | TouchEvent) => { // Do nothing if clicking ref's element or descendent elements if (!ref.current || (event.target instanceof HTMLElement && ref.current.contains(event.target))) { return; } handler(event); }; document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); return () => { document.removeEventListener("mousedown", listener); document.removeEventListener("touchstart", listener); }; }, [ref, handler] ); }

Lo estoy usando en el componente que está disponible en cada página y para el controlador simplemente pasando ()=> {setClose(true)}

¿Cómo puedo optimizarlo ya sea en el componente o en el propio gancho para evitar escuchar los clics inútiles que no hacen ninguna diferencia?