我正在使用 Material UI，当我使用下拉菜单组件时出现错误 Error: Invalid hook call 我正在使用带有 Material UI 框架的 React

import React, { Component, Fragment } from 'react';
import {Header, Footer} from '../Layouts'
import {Container, Paper, Grow, Popper, Grid, Button, MenuList, ClickAwayListener, MenuItem,  TableContainer, Table, TableHead, TableRow, TableCell, TableBody, makeStyles, Theme, createStyles, fade} from '@material-ui/core'
import CreateDialogAddScrip from '../Admin/Addscrip';
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    grow: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
    search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      '&:hover': {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginRight: theme.spacing(2),
      marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(3),
        width: 'auto',
      },
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
      // vertical padding + font size from searchIcon
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '20ch',
      },
    },
    sectionDesktop: {
      display: 'none',
      [theme.breakpoints.up('md')]: {
        display: 'flex',
      },
    },
    sectionMobile: {
      display: 'flex',
      [theme.breakpoints.up('md')]: {
        display: 'none',
      },
    },
  }),
);
function App() {
  return (
    <Container>
      <div>
        <Admin />
      </div>
    </Container>
  );
}
  export default App;

class Admin extends Component {

  render() {

    const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState<null | HTMLElement>(null);

    const isMenuOpen = Boolean(anchorEl);
    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
    const [open, setOpen] = React.useState(false);
    const anchorRef = React.useRef<HTMLButtonElement>(null);

    const handleToggle = () => {
      setOpen((prevOpen) => !prevOpen);
    };


    const handleClose = (event: React.MouseEvent<EventTarget>) => {
      if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
        return;
      }

      setOpen(false);
    };

    function handleListKeyDown(event: React.KeyboardEvent) {
      if (event.key === 'Tab') {
        event.preventDefault();
        setOpen(false);
      }
    }

    // return focus to the button when we transitioned from !open -> open
    const prevOpen = React.useRef(open);
    React.useEffect(() => {
      if (prevOpen.current === true && open === false) {
        anchorRef.current!.focus();
      }

      prevOpen.current = open;
    }, [open]);




    const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
      setAnchorEl(event.currentTarget);
    };

    const handleMobileMenuClose = () => {
      setMobileMoreAnchorEl(null);
    };

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

    const handleMobileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
      setMobileMoreAnchorEl(event.currentTarget);
    };





    return (
    <Container maxWidth="xl" >
        <Header/>

        <Container maxWidth="lg" className="innerContainer">
        <CreateDialogAddScrip/>

        <Grid container className="listContainer">
          <Fragment>
          <TableContainer>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="left">Category</TableCell>
            <TableCell align="left">Exchange</TableCell>
            <TableCell align="left">Scrip</TableCell>
            <TableCell align="left">CMP</TableCell>
            <TableCell align="left">Entry Price</TableCell>
            <TableCell align="left">Target Price</TableCell>
            <TableCell align="left">Stop Loss</TableCell>
            <TableCell align="left">Last Return Percentage</TableCell>
            <TableCell align="left">Return Time Frame</TableCell>
            <TableCell align="left">Retutn In</TableCell>
            <TableCell align="left">Date</TableCell>
            <TableCell align="left">Time</TableCell>
            <TableCell align="left"></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>

            <TableRow >
              <TableCell align="left">Last Minute Deals</TableCell>
              <TableCell align="left">BSE</TableCell>
              <TableCell align="left">Reliance</TableCell>
              <TableCell align="left">1065</TableCell>
              <TableCell align="left">1050</TableCell>
              <TableCell align="left">1120</TableCell>
              <TableCell align="left">1170</TableCell>

              <TableCell align="left">10%</TableCell>
              <TableCell align="left">90</TableCell>
              <TableCell align="left">Days</TableCell>
              <TableCell align="left">21-12-2020</TableCell> 
              <TableCell align="left">10:00 AM</TableCell>             
              <TableCell align="left">        
              <Button size="small" className="FormBtn" >
              <div>
        <Button
          ref={anchorRef}
          aria-controls={open ? 'menu-list-grow' : undefined}
          aria-haspopup="true"
          onClick={handleToggle}
        >
          Govind@invest19
        </Button>
        <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
          {({ TransitionProps, placement }) => (
            <Grow
              {...TransitionProps}
              style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
            >
              <Paper>
                <ClickAwayListener onClickAway={handleClose}>
                  <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
                    <MenuItem onClick={handleClose}>Logout</MenuItem>
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )}
        </Popper>
      </div>
              </Button>
        </TableCell>
            </TableRow>

        </TableBody>
      </Table>
    </TableContainer>
        </Fragment>
        </Grid>
      </Container>
      <Footer/>
      </Container>
    );
}
}