Can't interact with anything on screen while Material UI (MUI) Select Menu is open

I'm using Material UI's Select component in my webapp. I noticed that while a Select component's menu is open, I cannot interact with anything else on the screen. I can't click on other objects, hover events don't trigger, and I can't even scroll until the menu is closed.

It seems material UI has an invisible backdrop that pops up when a Select menu is opened, forcing the user to close that menu before interacting with anything else. However, I am trying to achieve a functionality where the user can still interact with the rest of the app while the dropdown is open (like, for instance, in the main page of Uber's website - the 'Company' dropdown in the nav bar will allow you to do other things while it is open).

Is there a way to disable or work around this invisible backdrop? I tried to set the z-index of everything else to something higher than the z-index of the backdrop, but this is hacky, not sustainable and doesn't always work.

Code / demo: https://codesandbox.io/s/practical-ully-fsfgpj

It would be awesome if there were a robust way to tackle this issue.

You don't need to use Select if you want such a component.

The Select component uses the Menu component to render the list of options in a dropdown menu.

And according to documentation:

> The Menu component uses the Popover component internally. However, you
> might want to use a different positioning strategy, or not blocking
> the scroll. For answering those needs, we expose a MenuList component
> that you can compose, with Popper in this example.

You can use Popper instead of Select.

For example:

<Button
  ref={anchorRef}
  id="composition-button"
  aria-controls={open ? "composition-menu" : undefined}
  aria-expanded={open ? "true" : undefined}
  aria-haspopup="true"
  onClick={handleToggle}
>
  Dashboard
</Button>
<Popper
  open={open}
  anchorEl={anchorRef.current}
  role={undefined}
  placement="bottom-start"
  transition
  disablePortal
>
  {({ TransitionProps, placement }) => (
    <Grow
      {...TransitionProps}
      style={{
        transformOrigin:
          placement === "bottom-start" ? "left top" : "left bottom"
      }}
    >
      <Paper>
        <MenuList
          autoFocusItem={open}
          id="composition-menu"
          aria-labelledby="composition-button"
          onKeyDown={handleListKeyDown}
        >
          <MenuItem onClick={handleClose}>Profile</MenuItem>
          <MenuItem onClick={handleClose}>My account</MenuItem>
          <MenuItem onClick={handleClose}>Logout</MenuItem>
        </MenuList>
      </Paper>
    </Grow>
  )}
</Popper>

You can get the whole code from the above documentation.