title: Adding object to nested array using firebase, nextjs
body: <p>I'm using nextjs, firebase to build my project, the project idea is a hybrid project management, the user is able to create a project with many boards and save tasks inside it:
  <a href="https://i.stack.imgur.com/GsdJ5.png" rel="nofollow noreferrer">UI of the board</a></p>
  <p>I want to save the board in this way:
  <a href="https://i.stack.imgur.com/L5GSZ.png" rel="nofollow noreferrer">screen shot from Firebase</a></p>
  <p>The code:</p>
  <p>Here is how board array and project states looks:</p>
  <pre><code>    const [projectFields, setProjectFields] = useState({
      title: '',
      details: '',
      date: '',
  });
  
  
      const [boardFields, setboardFields] = useState([
      {
          title: '',
          type: '',
          columns: [
              { name: &quot;backlog&quot; },
              { name: &quot;In progress&quot; },
              { name: &quot;In review&quot; }
          ]
  
      },
  ]);
  </code></pre>
  <p>sendProject function:</p>
  <pre><code>const sendProject = async () =&gt; {
  
  
      if (loading) return;
      setLoading(true);
      const docRef = await addDoc(collection(db, &quot;projects&quot;), {
          id: session.user.uid,
          projectDetails: projectFields,
          boards: boardFields,
          timestamp: serverTimestamp(),
      });
  
  
      setLoading(false);
      setProjectFields({
          title: '',
          details: '',
          date: '',
      })
      setboardFields({
          title: '',
          type: '',
          columns: [{}]
  
      })
  
  
  };
  </code></pre>
  <p>sendTask function, which is update the &quot;boards&quot; in the doc in firebase wrongly:</p>
  <pre><code>    const sendTask = async () =&gt; {
  
      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, &quot;projects&quot;, projectId ?? &quot;1&quot;);
      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',
          }
      )
  
  
  };
  </code></pre>
  <p>here is the result after updating the doc:
  <a href="https://i.stack.imgur.com/bsGzC.png" rel="nofollow noreferrer">wrong database schema picture</a></p>
  <p>I don't know how to update it correctly, any help please? thank you all</p>