So I have my custom Dialog component and useClickOutside hook

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])
}

and inside of this dialog I use MUI Select and whenever I open options menu, it triggers my hook and dialog closes.

I've got to the point that options menu renders outside of dialog parent div and apply aria-hidden:"true" to the root div and dialog div both this is how it looks

So is there any way to render Options menu inside of a parent div or avoid useClickOutside trigger when I choose any option inside a menu?