Hola gracias por la ayuda de antemano. Explico el comportamiento que quiero lograr en reaccionar. Aquí está la caja de arena para una mejor comprensión. El comportamiento del código es el siguiente:

Hay un div marcado con un borde de 1 px y dentro hay un botón y otro div donde representará una matriz. Al hacer clic en el botón, se agrega ese mismo botón a la matriz y se representa junto al primero. Varios clics en el primer botón generarán una columna de botones al lado del primer botón. Hasta aquí todo bien.

Lo que quiero lograr es que al hacer clic en cualquiera de los botones de la columna se genere otra columna de botones al lado del botón en el que hacemos clic. Y así. En este punto, estoy atascado. Gracias.

 import "./styles.css"; import { useState } from "react"; export default function App() { const [btnCount, setBtnCount] = useState([]); const style = { maxWidth: "100px", display: "flex", padding: "10px", border: "solid 1px" }; function handleAdd() { setBtnCount(btnCount.concat(btn)); } const btn = <button onClick={handleAdd}>Click</button>; return ( <div> <div style={style}> <div style={{ margin: "5px" }}>{btn}</div> <div> {btnCount.map((e, index) => { return <div key={index}>{e}</div>; })} </div> </div> </div> ); }