Javascript 如何从目录对象数组中创建材质树视图？

我有一个对象，该对象没有其他对象，并且具有字符串形式的direcory路径

{
 html:
      {
        name:"index.html"
      },
 js:
     {
       name:"index.js"
     },
 images:
     {
       name:"images"
     },
 images/tempImage.png:
     {
       name:"images/tempImage.png"
     }
}

我想创建一个树状目录结构

    <TreeView
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
    >
        <TreeItem nodeId="2" label="index.html" />
        <TreeItem nodeId="3" label="index.js" />
        <TreeItem nodeId="4" label="images">
          <TreeItem nodeId="5" label="tempImage.png" />
        </TreeItem>
    </TreeView> 

递归将在这里实现，但不清楚如何实现它。 这是我的代码，我正在尝试

const PopulateTree = () => {
return Object.values(zipContent).map((e, i) => {
  return <TreeItem key={i} nodeId={i.toString()} label={e.name} />;
});
};

constpopulatetree=（）=>{
返回Object.values（zipContent.map）（（e，i）=>{
返回；
});
};

请提出你的做法