antd Menu组件中的SubMenu通过组件传入时报错

如题，antd Menu组件中的SubMenu通过组件传入时报错。
初步分析原因是因为组建外会包裹一层标签导致的，如何解决这个问题呢？

具体代码截图如下

父组件中

<Menu
    mode="inline"
    theme="dark"
    openKeys={this.state.openKeys}
    onOpenChange={this.onOpenChange}
    selectedKeys={this.state.selectedKeys}
    onSelect={this.onSelect}
    style={{
      width: "100%"
    }}
      >
    <ProjectAndBoard projectList={this.state.projectList}/>
    <Menu.Item key="/myTask/finish">
      <NavLink
        to={{
          pathname: "/myTask/finish"
        }}
      >
        <Icon type="appstore" />
        <span> 已完成 </span>
      </NavLink>
    </Menu.Item>
    <Menu.Item key="/trash">
      <NavLink
        to={{
          pathname: "/trash"
        }}
      >
        <Icon type="appstore" />
        <span> 垃圾桶 </span>
      </NavLink>
    </Menu.Item>
</Menu>

子组件ProjectAndBoard中render函数截图

render() {
    return (
      <SubMenu
        className="create-project"
        key="create"
        title={
          <span>
            <Icon type="plus-circle" theme="outlined" />
            <span> 新建项目 </span>
          </span>
        }
      />
    );
  }

报错信息如下