material ui中导航栏链接中的子菜单

import React from 'react';
import { Button, Menu, MenuItem } from '@material-ui/core';

function NavigationBar() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button onClick={handleMenuOpen}>链接</Button>
      <Menu
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleMenuClose}
      >
        <MenuItem onClick={handleMenuClose}>子菜单项1</MenuItem>
        <MenuItem onClick={handleMenuClose}>子菜单项2</MenuItem>
        <MenuItem onClick={handleMenuClose}>子菜单项3</MenuItem>
      </Menu>
    </div>
  );
}