React/Material-UIで簡単なダッシュボード、

import React, { useState } from "react";
import {
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  Drawer,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import TimelineIcon from "@material-ui/icons/Timeline";
import TableChartIcon from "@material-ui/icons/TableChart";
import MapIcon from "@material-ui/icons/Map";

const Dashboard = () => {
  const [state, setstate] = useState(false);
  const handleMenuIcon = () => {
    setstate(!state);
    console.log(state);
  };
  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <IconButton onClick={handleMenuIcon}>
            <MenuIcon />
          </IconButton>
          <Typography>Dashboard</Typography>
        </Toolbar>
      </AppBar>
      <Drawer open={state} onClose={handleMenuIcon}>
        <List>
          <ListItem>
            <ListItemIcon>
              <TimelineIcon />
              <ListItemText primary="AAA" />
            </ListItemIcon>
          </ListItem>
          <ListItem>
            <ListItemIcon>
              <TableChartIcon />
              <ListItemText primary="BBB" />
            </ListItemIcon>
          </ListItem>
          <ListItem>
            <ListItemIcon>
              <MapIcon />
              <ListItemText primary="CCC" />
            </ListItemIcon>
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
};

export default Dashboard;