React嵌套菜单。如何在json中构建动态嵌套菜单

[
  {
    "id": 1,
    "name": "菜单1",
    "children": [
      {
        "id": 2,
        "name": "子菜单1",
        "children": [
          {
            "id": 3,
            "name": "子子菜单1"
          },
          {
            "id": 4,
            "name": "子子菜单2"
          }
        ]
      },
      {
        "id": 5,
        "name": "子菜单2"
      }
    ]
  },
  {
    "id": 6,
    "name": "菜单2"
  }
]

import React from 'react';

const NestedMenu = ({ data }) => {
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>
          {item.name}
          {item.children && <NestedMenu data={item.children} />}
        </li>
      ))}
    </ul>
  );
};

export default NestedMenu;

import React from 'react';
import NestedMenu from './NestedMenu';
import menuData from './menuData.json';

const App = () => {
  return (
    <div>
      <h1>动态嵌套菜单</h1>
      <NestedMenu data={menuData} />
    </div>
  );
};

export default App;