how to assign state to value in firestore

Question

How can I assign state to a object I get from firestore? I can't use async / await in react components or hooks so how can I do it?

I wanna make it so when the firestore database changes, the state changes also. Updating firestore everytime state updates is not an option because state can only be changed with a variable

Right now the task is just a pending promise

const getTask = async (project, title, dueDate, desc) => {
    let task = await getDoc(doc(db, `projects/${project}/tasks/${title}`))
    if (task.data() !== undefined) return task
    
    task = await setDoc(doc(db, `projects/${project}/tasks/${title}`), {
        title,
        id: crypto.randomUUID(),
        desc: desc,
        dueDate,
        completed: false
    })
    
    return task.data()
}

export default function useNewTask(project, title, desc, dueDate) {

    const [task, setTask] = useState(getTask(project, title, desc, dueDate))

    useEffect(() => {
        console.log(task) // pending promise
    })
    return [task, setTask]
}