不能在标题菜单项中使用PopOver

我想用popover组件创建一个标题

import React from "react";
import { Layout, Menu, Button } from "antd";
const { Header, Popover } = Layout;
const { SubMenu } = Menu;

const Index = (props) => {
    const content = (
        <menu>
            <Menu.Item>Menu</Menu.Item>
            <SubMenu title="SubMenu">
                <Menu.Item>SubMenuItem</Menu.Item>
            </SubMenu>
        </menu>
    );
    return (
        <Header>
            <div
                className=" float-left text-light"
                style={{ fontSize: "1.4rem" }}
            >
                Shonode
            </div>
            <Menu
                theme="dark"
                mode="horizontal"
                defaultSelectedKeys={["2"]}
                style={{ lineHeight: "64px" }}
            >
                <Menu.Item key="1">nav 1</Menu.Item>
                <Menu.Item key="2">nav 2</Menu.Item>
                <Menu.Item key="3">sda</Menu.Item>

            </Menu>
        </Header>
    );
};

export default Index;

此组件有效，但是当我将第3项粘贴到

<Menu.Item key="3">
       <Popover content={content}title="Title" trigger="hover">
        <Button>Hover me</Button>
    </Popover>
</Menu.Item>

我得到错误

元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。