Uso focus-trap-react para atrapar el foco del elemento dentro de la ventana emergente. Me gustaría poder cerrar la ventana cuando el usuario hace clic fuera de la ventana emergente. No puedo encontrar la manera de cómo lograr esto.

Intenté el siguiente enfoque, pero los eventos de clic fuera de la ventana emergente nunca se detectan:

 const Popup = () =>{ const popupRef = useRef(); const onClick = ev =>{ if (!popupRef.current.contains(ev.target)) console.log('clicked outside') } useEffect(()=>{ window.addEventListener('click', onClick); return (()=>{ window.removeEventListener('click', onClick); }) }, []); return ( <FocusTrap> <div id="modal-dialog" className="modal" ref={popupRef}> <button>Ok</button> <button>Cancel</button> </div> </FocusTrap>) }