如何为此代码准备菜单(数组

const menu = [
  {
    title: '首页',
    url: '/home',
    icon: 'home-icon'
  },
  {
    title: '关于我们',
    url: '/about',
    icon: 'info-icon',
    children: [
      {
        title: '公司历史',
        url: '/about/history'
      },
      {
        title: '团队介绍',
        url: '/about/team'
      }
    ]
  },
  {
    title: '产品',
    url: '/products',
    icon: 'product-icon',
    children: [
      {
        title: '产品A',
        url: '/products/a'
      },
      {
        title: '产品B',
        url: '/products/b'
      }
    ]
  },
  {
    title: '联系我们',
    url: '/contact',
    icon: 'contact-icon'
  }
];

import React from 'react';

const MenuItem = ({ item }) => (
  <li>
    <a href={item.url}>
      {item.icon && <i className={item.icon}></i>}
      {item.title}
    </a>
    {item.children && (
      <ul>
        {item.children.map((child, index) => (
          <MenuItem key={index} item={child} />
        ))}
      </ul>
    )}
  </li>
);

const Menu = ({ menu }) => (
  <ul>
    {menu.map((item, index) => (
      <MenuItem key={index} item={item} />
    ))}
  </ul>
);

export default Menu;