I'm looping through an array of posts. Each post has a unique user id associated with it and im trying to take that id and call another API and return an image URL.

I've created this function that should return the url

const getUser = async (id) => {
  let url = `http://127.0.0.1:8000/api/user/${id}/`
  const response = await fetch(url)
  const data = await response.json()
  const returnedurl = data.avatar
  return returnedurl
}

and then I put it in an img tag with the id of the current post.

{data?.map((data) => (
  <div className="allpostsingle" key={data.id} onClick={() => sendTo(data.id)}>
      <div className="allpostheader">
          <img src={getUser} />
          <p>Asiqur</p>
      </div>
      <div className="allpostimages">
          <div className="allpostdiv">
              <p>{data.wanted}</p>
              <img src={data.wanted_image} />
          </div>
      </div>
  </div>
))}         

The issue is that instead of returning a url it returns a promise. So I've tried creating another function to resolve the promise like so

const getUser = async (id) => {
  let url = `http://127.0.0.1:8000/api/user/${id}/`
  const response = await fetch(url)
  const data = await response.json()
  const returnedurl = data.avatar
  getting(returnedurl)
}

const getting = async (url) => {
  const imageurl = await url
  return imageurl
}

but it still returns a promise. How can I solve this, or is there a better way of approaching this.