How to properly await axios API request?

Question

I have a function that returns data from an API like so:

src/services/APIService.js

  getISODivNameById(itemIdentifier) {
    return apiClient.get(`/getISODivNameById/${itemIdentifier}`)
  }

Data is returned like so (with slight variations in each object, but the name property is the same)

"data": [
    {
     ...snip...
      "name": "Balkh", // <-- I need this value for my template
     ...snip...
    },
    {
      ...snip...
      "name": "Balkh",
      ...snip...
    }
  ]
}

And then in the <script> section of my single file component (SFC) (for VueJS) I am calling the APIService and passing in the argument it needs in order to grab the name value:

src/components/AdminSubdivisions.vue

async getISODivNameById(itemIdentifier_PK) {
  const response = (await APIService.getISODivNameById(itemIdentifier_PK))
    .data.data
  const name = response[0].name
  console.log(name) // <--- screenshot for this pasted below 
  return name
}

And in my <template> section of the SFC I am rendering the data to the UI like so:

<template>
 ...snip...

    <div v-for="(division, i) in isoDivisions :key="division.itemIdentifier_PK">

    ...snip...
    
        <span class="fw-bold me-3">{{ division.char6Code }}</span>
        <span>{{ getISODivNameById(division.itemIdentifier_PK) }}</span>
        <span class="badge bg-light text-dark">Province</span>
    ...snip...
    </div>

 ...snip...

</template>

Screenshot to show what data looks like in browser console log:

However, I get [object Promise] output in the rendered UI.

Can someone explain to me why it is doing this and how I can fix it so it just shows the name value (ie, Balkh)?

Thank you very much.