Sheet component is closing when user clicks on Popover menu item

Question

I have a simple Sheet component which contains Popover menu within. My Sheet has close on outside click functionality. Its using React hook useOnClickOutside similar to one here https://usehooks.com/useOnClickOutside/

ref is just sheet ref const ref = useRef(); which is passed to useOnClickOutside

However when I click on Popover menu (three dots) and click on Option 1 (menu item) my sheet closes as well. The reason for this is because menu items (Option 1 and 2) render outside of Sheet component. So when you click on menu item (Option 1) it thinks its doing outside click and it will close the Sheet. I don't want to close the sheet when you click option 1 and only close it when you actually click outside of sheet.

<Sheet
    isOpen={isOpen}
    onDismiss={onDismiss}
    closeOnOutsideClick={true}
    position="right">
    <>
      <Typography>
        Sheet
      </Typography>
      <PopoverMenu
        trigger={
          <Button
            icon={ellipsisVertical}
          />
        }>
          <MenuItem onClick={() => func()}>
            <Typography>
              Option 1
            </Typography>
          </MenuItem>
        <MenuItem onClick={() => func2()}>
          <Typography>
            Option 2
          </Typography>
        </MenuItem>
      </PopoverMenu>
    </>
  </Sheet>


const useCloseOnOutsideClick = ({ ...params }) => {
   const { element, closeOnOutsideClick, closeHandler } = params;
   // element = sheetRef
   // const sheetRef = useRef();
  useMemo(() => {
if (!closeOnOutsideClick || !element) return;

const determineWhereClicked = event => {
  const sanitizedElement = element && element.current !== null ? element.current : element;
  if (sanitizedElement && !sanitizedElement.contains(event.target)) {
    closeHandler();
  }
};

const determineKeyPressed = event => {
  if (event.key === 'Escape') closeHandler(event);
};

if (closeOnOutsideClick) {
  window.addEventListener('mousedown', determineWhereClicked);
  window.addEventListener('keydown', determineKeyPressed);
}

return () => {
  window.removeEventListener('mousedown', determineWhereClicked);
  window.removeEventListener('keydown', determineKeyPressed);
};
  }, [closeOnOutsideClick, element, closeHandler]);
};