Thứ tự thực hiện của useState trong ví dụ Counter

Mọi người cho mình hỏi thử tự thực hiện của hàm handleIncrease này là sao nhỉ?

Ở lần click đầu tiên thì sẽ là 1 - 2.1 - 3 - 2.2

Ở các lần click tiếp theo sẽ là 1 - 3 - 2.1 - 2.2

Theo mình có đọc trên docs của React thì setState là async, nhưng mình không hiểu sao lần đầu tiên click nó lại chạy theo thứ tự như thế ạ?

StackBlittz

import React from 'react';
import './style.css';

export default function App() {
  const [count, setCount] = React.useState(1);
  const hanldeClick = () => {
    console.log('1');
    setCount((prevCount) => {
      console.log('2.1');
      return prevCount + 1;
    });
    setCount((prevCount) => {
      console.log('2.2');
      console.log('------------');
      return prevCount + 1;
    });
    console.log('3');
  };

  return (
    <div>
      <h1>Hello StackBlitz! {count}</h1>

      <button onClick={hanldeClick}>Click</button>
    </div>
  );
}