Hello thanks for the help in advance. I explain the behavior I want to achieve in react. Here is the sandbox for a better understanding. The behavior of the code is as follows:

There is a div marked with a 1px border and inside it there is a button and another div where it will render an array. Clicking on the button adds that same button to the array and renders it alongside the first one. Multiple clicks on the first button will generate a column of buttons next to the first button. So far so good.

What I want to achieve is that clicking on any of the buttons in the column generates another column of buttons next to the button we click on. And so on. At this point, I'm stuck. Thank you.

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>
  );
}