Creé este menú desplegable simple en React y todo funciona bien hasta que hago clic fuera del alcance del menú desplegable. https://codesandbox.io/s/restless-fast-x2jhe8
Agregué una propiedad min-height: 100vh en el cuerpo, para replicar una página de tamaño completo. Como dije, la funcionalidad para cerrar el menú desplegable cuando hacemos clic en cualquier lugar de la página que no sea el menú desplegable, aún no está implementada. No estoy seguro de cómo manejar esto de la manera más elegante. Intenté algo como agregar un detector de eventos en el cuerpo con useEffect y luego verificar si event.target tiene un dropdown de clase, pero no funcionó como se esperaba.
Hago este enlace común en el que paso la ref de ese element y state cuál muestra o cierra modal
import { useEffect } from 'react'; function useOutsideClickManager(ref: React.RefObject<HTMLInputElement>, setIsOpen: React.Dispatch<React.SetStateAction<boolean>>) { useEffect(() => { function handleClickOutside(event: { target: EventTarget | Node | null }) { if (ref.current && !ref.current.contains(event.target as Node)) { setIsOpen(false); } } document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [ref, setIsOpen]); } export { useOutsideClickManager }; const [isOpen, setIsOpen] = React.useState(false); const wrapperRef = useRef<HTMLInputElement>(null); useOutsideClickManager(wrapperRef, setIsOpen);