[Bug]: CommandBar's overflow behavior can get stuck when using createRoot and React 18

[ej-toita]

Package

react

Package version

8.121.8

React version

18.3.1

Environment

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700 @ 2.50GHz
    Memory: 14.64 GB / 31.73 GB
  Browsers:
    Edge: Chromium (129.0.2792.89)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @fluentui/react: ^8.121.8 => 8.121.12
    @fluentui/theme: ^2.6.63 => 2.6.63
    @types/react: ^18.3.12 => 18.3.12
    @types/react-dom: ^18.3.1 => 18.3.1
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1

Current Behavior

The problem #29174 still exists on the latest version.
I'm observing the behavior on electron 33.2.0.

Expected Behavior

CommandBar re-renders as soon as the component width changes.

An workaround seems to be using the deprecated ReactDOM.render API, which force react to render DOMs as the same way as v17.
This turns off the asynchronous rendering feature of react.

import ReactDOM from 'react-dom';

// eslint-disable-next-line react/no-deprecated, @typescript-eslint/no-deprecated
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Reproduction

See #29174 for min repro, etc.

Steps to reproduce

See #29174 for min repro, etc.

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.