Antd Menu - React Js

Question

I am a learning web dev I've been stucked for a quite while with this design problem. Id be grateful if someone could teach me how to solve this problem. I want monthly earnings, Loop 1 and loop 2 to become a submenu and Here is my code:

import { Menu } from 'antd';
import { useNavigate } from 'react-router-dom';

const SideMenu = () => {
  const navigate = useNavigate();

  const menuItems = [
    {
      key: "earningCharts",
      label: 'Monthly Earning '
    },
    {
      key: "loop1",
      label: 'Loop 1'
    },
    {
      key: "loop2",
      label: 'Loop 2'
    },

    {
      key: "/",
      label: 'Passenger History'
    },
    {
      key: "user",
      label: 'User'
    },
    {
      key: "settings",
      label: 'Settings'
    }
  ];
  
  return (
    <Menu items={menuItems} onClick={(menuItem) => navigate(menuItem.key)}/>
  )
};

export default SideMenu;

Answer 1

Add a children array to the menu item you want to be submenu:

const menuItems = [
    {
      key: "earningCharts",
      label: 'Monthly Earning '
    },
    {
      key: "loop1",
      label: 'Loop 1',
      children: [{ key: 'someitem1', label: 'Some Item 1' }] // here
    },
    {
      key: "loop2",
      label: 'Loop 2',
      children: [{ key: 'someitem2', label: 'Some Item 2' }] // and here
    },

    {
      key: "/",
      label: 'Passenger History'
    },
    {
      key: "user",
      label: 'User'
    },
    {
      key: "settings",
      label: 'Settings'
    }
];