Fluent UI v9 React Controls with transparent popups (background)

In a recent project, I encountered a strange issue with the Fluent UI v9 React Controls. The background from some control popups was transparent instead of filled. As an example, see the below image. The popup's background is transparent, as you can see.

Fluent UI 9 popup with transparent background

To solve this problem I found two possible solutions. Either you set the control property inlinePopup to "true," or you wrap your whole component in a IdPrefixProvider provided by the @fluentui/react-components package. The following code example demonstrates the using of the IdPrefixProvider.

  const element: React.ReactElement<IComponentPropsProps> = React.createElement(
    YourComponentClass,
    { 
      your component properties 
    }   
  );
  const fluentElement: React.ReactElement<ComponentProps> = React.createElement(
      FluentProvider,
      {
        theme: this._appMode === AppMode.Teams || this._appMode === AppMode.TeamsLocal ?
          this._isDarkTheme ? teamsDarkTheme : teamsLightTheme :
          this._appMode === AppMode.SharePoint || this._appMode === AppMode.SharePointLocal ?
            this._isDarkTheme ? webDarkTheme : this._theme :
            this._isDarkTheme ? webDarkTheme : webLightTheme
    },
    element
  );

  const temp: React.ReactElement = React.createElement(IdPrefixProvider, { value: "msz" }, fluentElement);

  ReactDom.render(temp, this.domElement);
}

After the fix, the component is rendered correctly as you can see in the picture below.

Popup with filled background