recursive rendering tree in react

recursive_rendering.jsx

const Tree = ({ data }) => {
    return data?.map((p: NumberingBranch) => {
      return (
        <div key={p.id} className="NumberingList__Parent">
          <div>
            <div className="NumberingList__ItemWrapper">
              <span className="NumberingList__Title">{p.data.text}</span>
            </div>
          </div>
          {p.children.length > 0 && <Tree data={p.children} />}
        </div>
      );
    });
  };

 const renderNumberingTree = (data) => {
    return (
      <div className="NumberingScreen">
        <div className="NumberingList">{<Tree treeData={data} />}</div>
      </div>
    );
  };