Make Styles MUI

Всем доброго времени суток, пытаюсь разобраться почему у меня пропадают все элементы после добавления MakeStyles Помогите выяснить что я делаю не так.

import { Button, AppBar, Box, Container, IconButton, Toolbar, Typography } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import { makeStyles } from "@mui/material/styles";
export const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1
  },
  menuButton: {
    marginRight: theme.spacing(3)
  },
  title: {
    flexGrow: 1
  }
}))
function App() {
  const classes = useStyles();
  return (
    <AppBar>
      <Container fixed>
        <Toolbar>
          <IconButton edge="start"
            color='inherit' aria-label='menu' className={classes.menuButton}>
            <MenuIcon />
          </IconButton>
          <Typography variant='h6' className={classes.title}>Interstom</Typography>
          <Box mr={3}>
            <Button color='inherit' variant='outlined'>kek</Button>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}

export default App;```