Repository: ant-design
Issue: class for Menu items and use custom JSX (4.20.0)
Labels: Inactive

### What problem does this feature solve?

Hi guys.
please fix Menu items.
In previous version (4.19.5), we could modifiy every single item in Menu and pass them our classes and conditions but in new version (4.20.0), we can't modify and it is very annoying.
In new version (4.20.0) we are totally locked up and we can't modify Menu items.
Please make it ( items={[]} ) optional without any ugly warning in console and allow to add classes and custom JSX to items.
I used items as children because I used location.pathname for checking route and base on route, I map on routes array and show different menu with different classes in different conditions to the user.

### What does the proposed API look like?

Please remove ugly warning from console and don't remove children in next version.
Thank you a lot.
And I know here is not a good place to ask.

```jsx
<Menu
      theme="light"
      mode="inline"
      className="ml-bg-primary border-r-none"
      defaultOpenKeys={[defaultOpen]}
    >
      {routesName.map((route: Readonly<INavigation>) => {
        //! if we have a route with subMenu, this scope will execute
        if (route.subMenu?.length) {
          return (
            <Menu.SubMenu
              className={
                route.subMenu.find((sub) => sub.path === location.pathname)
                  ? collapsed
                    ? "ml-text-secondary bg-white ml-menu-radius"
                    : "ml-text-secondary bg-white ml-menu-radius max-width-250"
                  : "ml-text-primary max-width-250"
              }
              key={route.path}
              icon={route.icon}
              title={route.title}
            >
              {route.subMenu.map((sub) => (
                <Menu.Item
                  onClick={() => handleOpenSubMenu(route)}
                  className={
                    location.pathname === sub.path
                      ? collapsed
                        ? "ml-text-secondary bg-white ml-menu-radius subMenu-style"
                        : "ml-text-secondary bg-white subMenu-style"
                      : "ml-text-primary"
                  }
                  key={sub.id}
                  icon={sub.icon}
                >
                  <Link
                    to={sub.path}
                    className={
                      location.pathname === sub.path
                        ? "ml-text-secondary font-s-3"
                        : "ml-text-primary font-s-3"
                    }
                  >
                    {sub.name}
                  </Link>
                </Menu.Item>
              ))}
            </Menu.SubMenu>
          );
        } else {
          return (
            <Menu.Item
              className={
                `/${location.pathname.split("/")[1]}` === route.path
                  ? collapsed
                    ? "ml-text-secondary bg-white ml-menu-radius max-width-110"
                    : "ml-text-secondary bg-white ml-menu-radius max-width-250"
                  : "ml-text-primary"
              }
              key={route.id}
              icon={route.icon}
            >
              <Link
                to={route.path}
                className={
                  `/${location.pathname.split("/")[1]}` === route.path
                    ? "ml-text-secondary font-s-3"
                    : "ml-text-primary font-s-3"
                }
              >
                {route.name}
              </Link>
            </Menu.Item>
          );
        }
      })}
      <Menu.Item
        className="ml-text-primary max-width-250 without-style"
        onClick={() => Alert("logout", "Do you want to logout?", handleLogout)}
        key={999999}
        icon={<LogoutOutlined style={{ fontSize: 25 }} />}
      >
        <span className="ml-text-primary font-s-3">Logout</span>
      </Menu.Item>
    </Menu>
```
🎉 This is my sidemenu code.

<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->