Need help to understand the execution order of React Hooks in async function

Question

Example Code:

export const Component = () => {
  const [foo, setFoo] = useState(false);
  const [bar, setBar] = useState(false);
  
  const handleClick = async () => {
    // await Promise.resolve(); <--- comment this line first
    setFoo(true);
    console.log(1);
    setBar(true);
    console.log(2);
  };

  console.log(3);

  return <div onClick={handleClick} />;
};

When trigger the handleClick method, I got the console result as expected:

1
2
3

However, If uncomment the line: await Promise.resolve(), I got the result:

3
1
3
2

I just know the React may gather multiple setState into one and execute the one asynchronous to improve performance. My questions are:

1. What the execution order of useState?
2. How to explain the execution order with async/await?