材质 UI 组件的 OnClick 在 React Js 中不起作用

如何解决材质 UI 组件的 OnClick 在 React Js 中不起作用

我在我的项目中使用 Material UI 组件。 OnClick 不适用于按钮。我也在谷歌上搜索过，但没有找到任何解决方案。我也尝试过使用 div 但这也不起作用。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import MobileDrawer from "./MobileDrawer";
import MenuIcon from '@material-ui/icons/Menu';
import IconButton from "@material-ui/core/IconButton";

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,},menuButton: {
        marginRight: theme.spacing(2),title: {
        flexGrow: 1,marginLeft: "20px",marginTop: "8px"
    },}));

export default function MobileHeader() {
    const classes = useStyles();
    const handleDrawerStatus = () => {
        alert("hi")
    }

    return (
        <div className={classes.root}>
            <AppBar position="static" style={{ backgroundColor: "#040b2d" }}>
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        edge="start"
                        onClick={handleDrawerStatus}
                    >
                        <MenuIcon />
                    </IconButton>
                </Toolbar>
            </AppBar>
        </div>
    );
}