javascript - Promise.resolve.then not running sequently

Codesandbox: https://codesandbox.io/s/aged-meadow-s4hzi?file=/src/App.js:100-972

I am using Promise.resolve().then in App.js, but the result in Console is different from what I am expecting.

My expectation:

first then 
Change res to 1 
second then 
1

But the actual result

first then 
second then 
0
Change res to 1 

App.js

useEffect(() => {
    var res = 0;
    let myPromises = [myPromise, myPromise, myPromise];
    let mySecondPromises = [myPromise, myPromise];

    Promise.resolve()
      .then(() => {
        console.log("first then");
        Promise.all(myPromises)
          .then((res) => {
            return mySecondPromises;
          })
          .then((arr) => {
            return Promise.all(arr)
              .then((res) => {
                if (true) {
                  console.log("Change res to 1");
                  res = 1;
                }
              })
              .catch((err) => {...});
          })
          .catch((err) => {...});
        return res;
      })
      .then((res) => {
        console.log("second then");
        console.log(res);
      });
  }, []);