Javascript "for of" loop not returning value

Question

async function getMultiBalances() {
  let chains = await getAllChains();
  let address = await getAddress();
  let totalBalances = [];

  for (let chain of chains) {
    let chainId = chain.chain_id;
    let balances = await getMultichainBalancesArray(chainId, address);
    if (balances != undefined) {
      totalBalances = [...balances, ...totalBalances];
    }
  }
  console.log(totalBalances);
  return totalBalances;
}

The above code console logs nothing and returns nothing.

Now.. If I move the console log and return statement into the "for of" loop it will return the first iteration and work fine. I don't understand why I can't return the final value outside of the for of loop to get the array I actually want.

async function getMultiBalances() {
  let chains = await getAllChains();
  let address = await getAddress();
  let totalBalances = [];

  for (let chain of chains) {
    let chainId = chain.chain_id;
    let balances = await getMultichainBalancesArray(chainId, address);
    if (balances != undefined) {
      totalBalances = [...balances, ...totalBalances];
    }
    console.log(totalBalances);
    return totalBalances;
  }
}