Using a portal with `SubmenuList` may prevent `onClick` events from firing on submenu items

[cheton]

When using a portal (usePortal: true), the submenu content is rendered outside the DOM hierarchy of the parent menu. If the menu is configured to close on onBlur, onClickOutside, or onMouseLeave, then:

1. Clicking a submenu item inside a portal might immediately trigger a blur or outside click event.
2. The parent menu unmounts before the onClick of the submenu item has a chance to fire.

So the submenu item gets removed from the DOM before the onClick handler can execute.

open-submenu-with-portal.mp4

CodeSandbox: https://codesandbox.io/p/sandbox/lively-sky-fs987t

<Menu defaultIsOpen={true}>
  <MenuButton>Options</MenuButton>
  <MenuList onClick={handleClickMenuItem} width="max-content">
    <MenuItem value={1}>List item 1</MenuItem>
    <MenuItem value={2}>List item 2</MenuItem>
    <MenuDivider />
    <Submenu>
      <SubmenuToggle>
        <MenuItem>
          <Flex
            alignItems="center"
            columnGap="2x"
            justifyContent="space-between"
            width="100%"
          >
            Submenu
            <AngleRightIcon />
          </Flex>
        </MenuItem>
      </SubmenuToggle>
      <SubmenuList
        PopperProps={{
          usePortal: true,
        }}
        width="max-content"
      >
        <MenuItem value={3}>List item 3</MenuItem>
        <MenuItem value={4}>List item 4</MenuItem>
      </SubmenuList>
    </Submenu>
  </MenuList>
</Menu>