Menu not showing up when app is on fullscreen

I’m using react-full-screen to provide fullscreen functionality to my project. Noticed that, when on fullscreen mode, a Menu component I’m showing up on a button click won’t show up. My Menu looks something like this:

 <Menu anchorEl={anchorEl} open={isOpen} onClose={handleClose}>
    <MenuItem onClick={() => handleMenuClick('general')}>General</MenuItem>
    <MenuItem onClick={() => handleMenuClick('appearance')}>
      Appearance
    </MenuItem>
    <MenuItem onClick={() => handleMenuClick('sound')}>Sound</MenuItem>
  </Menu>

If I inspect the DOM I can see the

element there, is just that it won’t show up on the screen. Tried changing the z-index and position properties but didn’t work. Any idea?
• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Menu should show up when on fullscreen mode.

Current Behavior 😯

Not showing up.

Steps to Reproduce 🕹

1. Install react-full-screen
2. Implement a < Menu >
3. Try to open it on fullscreen mode. Link: CodeSandbox Page to test fullscreen

[bthall16]

I found theme composition/default props to work well for me here:

function container() {
  // Use the fullscreen element if in fullscreen mode, otherwise just the document's body
  return document.fullscreenElement ?? document.body;
}

// For my use case I needed menus and tooltips to be visible while in fullscreen mode
const fullscreenTheme = createTheme({
  components: {
    MuiMenu: {
      defaultProps: {
        container,
      },
    },
    MuiTooltip: {
      defaultProps: {
        PopperProps: {
          container,
        },
      },
    },
  },
});

...

<SomeComponentThatCouldBeFullscreen>
  {/* Ensures the custom container function only applies to menus and tooltips 
      within the fullscreen element */}
  <ThemeProvider theme={fullscreenTheme}>
    ...
  </ThemeProvider>
</SomeComponentThatCouldBeFullscreen>

Admittedly I came up with this fairly quickly but it appears to be working well for me.

[joncursi]

Update: I was able to mostly solve this by using the container prop on the Popover component. This will prevent pop over components from being appended to document.body and instead append them to the container element specified.