Why does React’s use of createRoot and ReactDOM.render have different synchronous and asynchronous behaviors for setState?

Regarding the following code:

import React from "react";

export default class App extends React.Component {
  state = {
    count: 0
  };
  componentDidMount() {
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count);
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count);
    setTimeout(() => {
      this.setState({ count: this.state.count + 1 });
      console.log(this.state.count);
      this.setState({ count: this.state.count + 1 });
      console.log(this.state.count);
    }, 0);
  }
  render() {
    return "123";
  }
}

If using ReactDOM.render the log will be 0,0,2,3， but for createRoot the log will be 0,0,1,1，Can someone help explain the reason?