Actualicé a la última versión, recibo el siguiente mensaje de error: TypeError: Cannot read properties of undefined (reading 'breakpoints')

paquete.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",

Código:

 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> );

Ejemplo: Codesandox