[React18] useLayoutEffect runs multiple times while using ReactDOMClient.createRoot

[CJY0208]

Problem

useLayoutEffect runs multiple times while using ReactDOMClient.createRoot

Reproduce Code

import * as React from 'react';
import { render } from 'react-dom';
import { createRoot } from 'react-dom/client';
import { Freeze } from 'react-freeze';

const rootElement = document.getElementById('root')
render(<App />, rootElement); // √
createRoot(rootElement).render(<App />); // x

function Test() {
  React.useLayoutEffect(() => {
    console.log('run useLayoutEffect'); // Log is executed for each unfreezing
  }, []);

  return <div>test</div>;
}

function App() {
  const [freeze, setFreeze] = React.useState(false);

  return (
    <div>
      <button onClick={() => setFreeze(!freeze)}>toggle freeze state</button>
      <Freeze freeze={freeze}>
        <Test />
      </Freeze>
    </div>
  );
}