Async push to array in order

Question

Preface: So I've googled around and read a lot of stackoverflow questions and various blogs all leading me down 3 routes: async forEach packages, promises and for loops. Ultimately I went with for loops since they seemed the best to acommplish what I needed to do.

So I need to take the entries of urls and parse them through fetch and push the resulting numbers into an array. I'm using the following code:

var essencePowers = []
var essenceUrls = []
  essences.forEach(function (id) {
    essenceUrls.push(`https://${region}.api.blizzard.com/data/wow/azerite-essence/${id.id}?namespace=static-us,${id.rank}`)
  })

  console.log(essenceUrls)

  async function getEssences() {
    for (const [idx, url] of essenceUrls.entries()) {
      var u = url.split(',')
      var ess = await fetch(u[0], { headers: { 'Authorization': 'Bearer ' + access_token } })
      var essBody = await ess.json()
      await essencePowers.push(essBody.powers.[u[1] - 1].id)
      console.log(essencePowers) // [2, 34, 54, 22]
    }
  }

  getEssences()
  console.log(essencePowers) // []
}

Running the above code will produce the numbers in the sequence I expect, but the moment I call the the array after the getEssences() function, I get [].

At this point, I'm a little confused as to where I've gone astray.