Textfield's autofocus in modal does not works with StrictMode and ReactDOM.createRoot

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When switching to ReactDOM.createRoot, opening a Dialog containing a TextField with autofocus, the field is not focused.

Expected behavior 🤔

No response

Steps to reproduce 🕹

reproducer: reproducer : https://codesandbox.io/s/dreamy-kowalevski-8eu5fb?file=/src/index.js

Context 🔦

The Dialog + field

export default function App() {
  const [openPopup, setOpenPopup] = useState(false);
  return (
    <>
      <Button onClick={() => setOpenPopup(true)}>
        Open Modal
      </Button>
      <Dialog open={openPopup}>
        <DialogContent>
          <TextField autoFocus />
        </DialogContent>
      </Dialog>
    </>
  );
}

When initializing the project with the previous version of react it worked. But react triggered the deprecation about switching to ReactDOM.createRoot

import { render } from "react-dom";
render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById("root")
);

When switching to ReactDOM.createRoot it does not worked

ReactDOM.createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

But, if I remove the StrictMode, it work

ReactDOM.createRoot(document.getElementById("root")).render(
  <App />
);

Your environment 🌎

  System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 17.9.0 - /usr/bin/node
    Yarn: 3.1.1 - /usr/local/bin/yarn
    npm: 8.10.0 - /usr/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 91.10.0esr
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.83 
    @mui/icons-material: ^5.8.2 => 5.8.2 
    @mui/material: ^5.8.2 => 5.8.2 
    @mui/private-theming:  5.8.0 
    @mui/styled-engine:  5.8.0 
    @mui/system:  5.8.2 
    @mui/types:  7.1.3 
    @mui/utils:  5.8.0 
    @types/react: ^18.0.10 => 18.0.10 
    react: ^18.1.0 => 18.1.0 
    react-dom: ^18.1.0 => 18.1.0 
    typescript: ^4.7.2 => 4.7.2 

Start with the linked CodeSandbox reproducer and trace the Dialog, DialogContent, and TextField interaction under ReactDOM.createRoot with StrictMode. Confirm the autofocus failure, then verify that the field receives focus when the issue is fixed and add or update a regression test if the relevant component tests are found.