Promise problems in Javascript and msal.js in getting query information asynchronously

Question

first of all, I apologize if I make a mistake, I am learning to use msal.js and I am in a dilemma regarding the acquisition of information with the query, I attach my source code.

const Test009 = async function () {
  tok = null;
  arr = ["aa", "bb", "cc"];
  try {
    getTokenPopup(loginRequest)
      .then((response) => {
        tok = response.accessToken;
        t = Function01(response.accessToken).then(function teste(val) {
          console.log("the val 1 is:" + val + " ");
          arr[0] = val;
        });
      })
      .then((response) => {
        t = VerificacionMe(tok, tok).then(function teste(val) {
          console.log("the val 2 is:" + val + " ");
          arr[1] = val;
        });
      })
      .then((response) => {
        t = VerificacionMe(tok, tok).then(function teste(val) {
          console.log("the val 3 is:" + val + " ");
          arr[2] = val;
        });
      })
      .then(function teste3(val) {
        console.log(arr);
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);

        setTimeout(function () {
          console.log(arr);
          console.log(arr[0]);
          console.log(arr[1]);
          console.log(arr[2]);
        }, 100);
      });
  } catch (error) {
    console.error(`Error: ${error}`);
  }
};

async function Function01(token) {
  const res = await fetch("https://graph.microsoft.com/v1.0/me/department", {
    method: "GET",
    headers: {
      Authorization: token,
      "Content-Type": "application/json",
    },
  });
  const data = await res.json();
  return data.value;
}

async function VerificacionMe(array, token) {
  const respuesta = await fetch("https://graph.microsoft.com/v1.0/me/", {
    method: "GET",
    headers: {
      Authorization: token,
      "Content-Type": "application/json",
    },
  });
  const data = await respuesta.json();
  return data;
}

the result I get is:

aa
bb
cc

the val 2 is:[object Object] 
the val 1 is : "Departament"
the val 3 is:[object Object] 

----------------------------
[object object] is 

@odata.context
: 
"https://graph.microsoft.com/v1.0/$metadata#users/$entity"
businessPhones
: 
['+52 (55) 5555-5555']
displayName
: 
"Name LastName"
givenName
: 
"Name"
id
: 
"1111111-2222-3333-4444-555555555555"
jobTitle
: 
"Job"
mail
: 
"[email protected]"
mobilePhone
: 
null
officeLocation
: 
"Hell"
preferredLanguage
: 
null
surname
: 
"LastName"
userPrincipalName
: 
"[email protected]"

As you can see, they are nested "then", with double console.log -the first block is executed immediately, with the default values- and the second block is executed after 100 milliseconds -with the values that I really need-.

The idea is to: execute function by function - in the example "Function01", "VerificacionMe" and "VerificacionMe" in order, save the results in an array and at the end print the information of this array, which I still can't get and that's why I ask for help for this case.