Soy nuevo en Firebase. En este momento estoy creando una aplicación de lista de tareas pendientes con React, mi código es el siguiente:

 ... 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); } } }; ...

Debajo de mi componente List tengo un componente TodoItem:

 ... const onDelete = (id) => deleteDoc(doc(pathRef, '/?????')) return ( <div key={id} className="..."> <li className="...">{text}</li> <button onClick={() => onDelete(id)} className="...">Delete</button> </div> ) ...

Para que funcione el botón Delete , necesito el docRef.id único asociado a ese documento, pero tengo problemas para encontrar una manera de obtenerlo de Firestore o guardarlo en mi estado de tal manera que permanezca relacionado con su documento correspondiente. Probablemente estoy complicando demasiado esto, así que me dirijo a ustedes, encantadores programadores de stackoverflow. ¿Que puedo hacer?