I am unable to set logic for it. I have defined toc as:

const [toc, setToc] = useState([{type: "item"}]);

There are two events:

1. Adding co-element , 2. Adding nested child

   [
     {
       type: "item",
     }
   ]
   

After iteration of Step 1:

[
  {
    type: "item",
  },
  {
    type: "item",
  }
]

After iteration of Step 2:

[
  {
    type: "item",
  },
  {
    type: "item",
    items: 
       {
         type: "item"
       }
  }
]

After one more iteration of Step 2:

[
  {
    type: "item",
  },
  {
    type: "item",
    items: 
      {
        type: "item",
        items:
           {
             type: "item"
           }
      }
   }
]

And also i want to restrict it upto 3 nested childs. Remember add child adds only to the last object.