I updated to the latest version, I'm getting the following error message: TypeError: Cannot read properties of undefined (reading 'breakpoints')

package.json:

    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.4.4",
    "@mui/material": "^5.4.4",
    "@mui/styles": "^5.4.4",
    "react": "^17.0.2",
    "react-dom": "^16.13.1",

Code:

import {
    createTheme,
    useTheme,
    ThemeProvider,
} from "@mui/material";
import { makeStyles } from '@mui/styles';

....

const useStyles = makeStyles((theme) => ({
        root: {
            display: "flex"
        },
        drawer: {
            [theme.breakpoints.up("lg")]: {
                width: drawerWidth,
                flexShrink: 0
            }
        },
        appBar: {
            [theme.breakpoints.up("lg")]: {
                width: `calc(100% - ${drawerWidth}px)`,
                marginLeft: drawerWidth
            }
        },
        menuButton: {
            marginRight: theme.spacing(2),
            [theme.breakpoints.up("lg")]: {
                display: "none"
            },
            backgroundColor: darkState ? grey[900] : blue[500]
        },
        // necessary for content to be below app bar
        toolbar: theme.mixins.toolbar,
        drawerPaper: {
            width: drawerWidth,
            color: "#ffffff",
            backgroundColor: darkState ? grey[900] : blue[500]
        },
        content: {
            flexGrow: 1,
            padding: theme.spacing(3)
        }
    }));

    const classes = useStyles();
    const theme = useTheme();

   ...

    return (
        <ThemeProvider theme={darkTheme}>
            <div className={classes.root}>
             ....
            </div>
        </ThemeProvider>
    );

Example: Codesandox