Rendering issue of Fluent UI Dialog and Drawer caused by issue in SharePoint

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: Newest
• SPFx version: 1.18
• Node.js version 18
• etc

Describe the bug / error

When rendering the Fluent UI 9 components Drawer or Dialog the styling becomes messed up. I made a report with the Fluent UI team here: https://github.com/microsoft/fluentui/issues/32253
They pointed to this being a bug in SharePoint and this is why I post here. Something about mismatch of context versions.
The issue only happens in SharePoint context, like the workbench.
I have made a simple reproduction here based on the Hello World getting started web part: https://github.com/jcoolsen/SampleForStylingIssue

Below information is copied in from the other issue:
Actual Behavior
When using the Drawer or Dialog components in a SharePoint Online context, like a web part in a site or in the workbench, they are missing their base styling variable definitions. This appears to be because they refer to the wrong fui-FluentProvider# class. Often they refer to "fui-FluentProvider1" but should point to a different number in the class attribute. As far as I can see, this is not caused by any change in the Fluent UI components themselves, but rather by some unknown (recent?) change in the SharePoint Online platform that somehow breaks compatibility.
The effect is that the rendering becomes bad, nearly unreadable.

This is what we see:

Underlying HTML from above:

Steps to reproduce

1. Run the referenced reproduction: "npm i" and "gulp serve"
2. Click button "Open Drawer" or "Open Dialog".
3. Note how the styling breaks because fui-FluentProvider# numbering does not match the proper element id in the rendered HTML.

Expected behavior

Below information is copied in from the other issue:
Expected Behavior
I expect the components to display properly.

This is what we want:

(the thick black border is caused by the Windows snipping tool)
Underlying HTML from above: