Así que tengo mi componente de Diálogo personalizado y uso el gancho ClickOutside

 export function useClickOutside<T extends HTMLElement>( ref: RefObject<T>, callback: (event: MouseEvent) => void, ) { const handleClick = useCallback( (event: MouseEvent) => { if (!ref.current || ref.current.contains(event?.target as Node)) { return } callback(event) }, [ref, callback], ) useEffect(() => { document.addEventListener('mousedown', handleClick) return () => { return document.removeEventListener('mousedown', handleClick) } }, [handleClick, ref]) }

y dentro de este cuadro de diálogo uso MUI Select y cada vez que abro el menú de opciones, activa mi enlace y se cierra el cuadro de diálogo.

Llegué al punto en que el menú de opciones se muestra fuera del div principal del diálogo y aplica aria-hidden: "true" al div raíz y al div del diálogo , así es como se ve.

Entonces, ¿hay alguna forma de mostrar el menú Opciones dentro de un div principal o evitar el disparador UseClickOutside cuando elijo cualquier opción dentro de un menú?