How to make popup not affecting other elements (not overlaying)

[DilemmaGX]

  <Menu>
    <MenuTrigger disableButtonEnhancement>
      <MenuButton>Example</MenuButton>
    </MenuTrigger>

    <MenuPopover>
      <MenuList>
        <MenuItem>Item a</MenuItem>
        <MenuItem>Item b</MenuItem>
      </MenuList>
    </MenuPopover>
  </Menu>

I put these in my App.tsx file, however, after triggering the menu, there's a white overlay that covers everything else (including the trigger) up. I tried making it into another tsx file and import it, but the overlaying still occures.
Last time I tried the storybook's dialog example on my file, it also generats a white overlay.
How to fix this?

[ZakariaWijaya]

exactly the same problem I had, I'm using fluentui v9 on my nextjs project. i'm trying in stackblitz.com is worked

[ZakariaWijaya]

I tried inspect element, something happened to the expanded property but the popup didn't appear.

[DilemmaGX]

Well I think I know how now...
When using FluentProvider, add attribute applyStylesToPortals={false}.
That is:

<FluentProvider theme={webLightTheme} applyStylesToPortals={false}></FluentProvider>

I'm not sure about the side effects, though.

[AdamBlack34]

This exact scenario happened to me this morning. Across my app I have various places where I am using popovers but when the popover appears it takes over the whole screen. Using applyStylesToPortals={false} fixes this but I do not understand the root cause, has anyone figured this out?