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 => {
        e.preventDefault();
        const text = todoItem.current.value
        if(text) {
            try {
                const docRef = await addDoc(pathRef, {
                    text,
                    completed: false,
                    createdAt: serverTimestamp(),
                });
                console.log("This doc's id is: ", docRef.id)
              } 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>
        </div>
    )
...

For the Delete button to work I need the unique docRef.id 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 stackoverflow. What can I do?