Error reporting problem under Multi-level Loop rendering of React+Antd Menu menu components

7.5 update: the reason for the problem is that the tag case is wrong
Menu.item can be changed to Menu.Item,

error rendering of level 3 menu.
error message is as follows:

clipboard.png

warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it"s defined in, or you might have mixed up default and named imports.

Check the render method of `LayoutWrap`.
    in LayoutWrap (created by Connector)
    in Connector (created by Connect(Connector))
    in Connect(Connector) (created by App)
    in div (created by App)
    in App (created by Route)
    in Route
    in Switch
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider

the code structure is as follows:

const menuContent = menuGroup.value.map((val, index) => (
      <SubMenu
        key={"sub" + index}
        className={style.menuMargin}
        title={<span><Icon type="user"/><span>{val.name}</span></span>}
      >
        nodes.children ?
        {(val.children || []).map((nodes, num) => (
            <SubMenu
              key={nodes.name}
              className={style.menuMargin}
              title={<span><Icon type="user"/><span>{nodes.name}</span></span>}
            >
              {
                nodes.children.map((value, num) => (
                  <Menu.item
                    onClick={() => this.onHandleClick(value.name)}
                    key={value.name}
                  >
                    <Link to={utils.selectedMenuRouteData(value.name,"toPath")}>{value.name}</Link>
                  </Menu.item>
                ))
              }
            </SubMenu>
            :
            <Menu.Item onClick={() => this.onHandleClick(nodes.name)} key={nodes.name}>
              <Link to={utils.selectedMenuRouteData(nodes.name,"toPath")}>{nodes.name}</Link>
            </Menu.Item>
        ))}
      </SubMenu>
    ));

the data structure is as follows:

const value= [
    {
      "children": [{
        "children":[{
        "children": null,
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 3,
        "name": "",
        "num": 1,
        "parentId": 0,
        "url": null
      }],
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 2,
        "name": "",
        "num": 1,
        "parentId": 0,
        "url": null
      }, {
        "children": null,
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 2,
        "name": "",
        "num": 1,
        "parentId": 0,
        "url": null
      }, {
        "children": null,
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 2,
        "name": "",
        "num": 1,
        "parentId": 0,
        "url": null
      }, {
        "children": null,
        "icon": "",
        "id": 1,
        "ismenu": 1,
        "levels": 2,
        "name": "",
        "num": 1,
        "parentId": 0,
        "url": null
      }],
      "icon": "",
      "id": 1,
      "ismenu": 1,
      "levels": 1,
      "name": "SSO",
      "num": 1,
      "parentId": 0,
      "url": null
    }]
May I ask what the reason is?


change Menu.item to Menu.Item.

Menu