How to get the ID of a document after adding it into firestore

I’m new to Firebase. Right now I’m building a Todo List app with React, my code is the following:

    const todoItem = useRef(null);
    const pathRef = collection(firestore, `users/${user.uid}/todos`)
    const [todos] = useCollectionData(pathRef);

    const handleSubmit = async e => {
        const text = todoItem.current.value
        if(text) {
            try {
                const docRef = await addDoc(pathRef, {
                    completed: false,
                    createdAt: serverTimestamp(),
                console.log("This doc's id is: ",
              } catch (e) {
                console.error("Error adding document: ", e);

Below my List component I have a TodoItem component:

    const onDelete = (id) => deleteDoc(doc(pathRef, '/?????'))

    return (
        <div key={id} className="...">
            <li className="...">{text}</li>
            <button onClick={() => onDelete(id)} className="...">Delete</button>

For the Delete button to work I need the unique associated to that document, but I’m having troubles finding a way to fetch it from Firestore or saving it in my state in such way that remains related to it’s corresponding document. I’m probably overcomplicating this too much, so I turn to you lovely coders from free code camp. What can I do?