How to render programmatically a FileTree with recursive nested children with JSX?

I'm trying to programmatically render as a filetree, with Material-UI (react library), a folder structure. I don't necessarily need to render all children during the first render.

const folderStructure = [
    {
      name: "AAA",
      nodeType: 'project',
      children: [
        {
            name: "AAAA123",
            nodeType: 'study',
            children: [
                {
                    name: "ADAE.sas7bdat",
                    nodeType: 'file'
                }
            ]
        }
      ]
    },
    {
      name: "BBB",
      nodeType: 'project',
      children: [
          {
              name: "BBBB124",
              nodeType: 'study'
          }
        ]
    }
];

I'm rendering manually the children, instantiating a StyledTreeItem per child as below:

 <TreeView
      className={classes.root}
      defaultExpanded={[]}
      defaultCollapseIcon={<ArrowDropDownIcon />}
      defaultExpandIcon={<ArrowRightIcon />}
      defaultEndIcon={<div style={{ width: 24 }} />}
    >
      <StyledTreeItem nodeId="3" labelText="/" labelIcon={Label}>
        {structure.map((el: IconFilterTreeNode, idx: number) => {
          return (
            <StyledTreeItem
              key={idx}
              nodeId={el.name}
              labelText={`Project-${el.name}`}
              labelIcon={InfoIcon}
              labelInfo={String(idx)}
              color="#e3742f"
              bgColor="#fcefe3"
            >
              {el?.children.map((el2: IconFilterTreeNode, idx2: number) => {
                return (
                  ...
                );
              })}
            </StyledTreeItem>
          );
        })}
  </StyledTreeItem>
</TreeView>

Is there an efficient way to render the children automatically from the first node, without having to render manually the nested children?