Estoy usando nextjs, firebase para construir mi proyecto, la idea del proyecto es una gestión de proyectos híbrida, el usuario puede crear un proyecto con muchos tableros y guardar tareas dentro de él: IU del tablero

Quiero guardar el tablero de esta manera: captura de pantalla de Firebase

El código:

Así es como se ve la matriz de la placa y los estados del proyecto:

 const [projectFields, setProjectFields] = useState({ title: '', details: '', date: '', }); const [boardFields, setboardFields] = useState([ { title: '', type: '', columns: [ { name: "backlog" }, { name: "In progress" }, { name: "In review" } ] }, ]);

función enviarProyecto:

 const sendProject = async () => { if (loading) return; setLoading(true); const docRef = await addDoc(collection(db, "projects"), { id: session.user.uid, projectDetails: projectFields, boards: boardFields, timestamp: serverTimestamp(), }); setLoading(false); setProjectFields({ title: '', details: '', date: '', }) setboardFields({ title: '', type: '', columns: [{}] }) };

función sendTask, que actualiza los "tableros" en el documento en firebase incorrectamente:

 const sendTask = async () => { if (loading) return; setLoading(true); let object = { id: '1', priority: tasksFields.priority, title: tasksFields.title, date: tasksFields.date, details: tasksFields.details, chat: '0', attachment: '0' } const taskRef = doc(db, "projects", projectId ?? "1"); const newBoards = [...project.boards]; newBoards[boardIndex] = { ...newBoards[boardIndex], columns: { ...newBoards[boardIndex].columns[columnIndex], tasks: [...newBoards[boardIndex].columns[columnIndex].tasks, object] }, } await updateDoc(taskRef, { ...project, boards: newBoards, }); setLoading(false); setTasksFields( { id: '', priority: '', title: '', details: '', date: '', attachment: '0', } ) };

aquí está el resultado después de actualizar el documento: imagen de esquema de base de datos incorrecta

No sé cómo actualizarlo correctamente, ¿alguna ayuda por favor? gracias a todos