No puedo establecer la lógica para ello. He definido toc como:

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

Hay dos eventos:

1. Agregando co-elemento, 2. Agregando hijo anidado

    [ { type: "item", } ]

Después de la iteración del Paso 1:

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

Después de la iteración del Paso 2:

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

Después de una iteración más del Paso 2:

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

Y también quiero restringirlo hasta 3 niños anidados. Recuerde que add child agrega solo al último objeto.