How can I put the data from firestore into my html?

Im making a ToDo list app project and this is my function for making tasks:

const Task = async (name, desc, dueDate) => {
    return await setDoc(doc(db, "projects", name), {
        name,
        id: crypto.randomUUID(),
        desc,
        dueDate,
        completed: false
    })
}

the probelm I have is that to my understanding you cant use promises in components and if I want to get data from the database it uses promises, so how am I gonna do it then?

I tried doing this:

function App() {
  
  const taskRef = doc(db, "projects", "first task")
  const taskSnap = getDoc(taskRef)

  return (
    <div>
    {taskSnap.data()}
    </div>
  )
}

but the taskSnap is a pending promise, and I cant use async / await in the App component