TypeError: Cannot read properties of undefined (reading 'up') MUI

In my Header component my custom styling are coming from style.js where I've used makeStyles from @mui/styles. But In there while setting up the [theme.breakpoints.up("sm")] I'm getting the error above. I tried wrapping the index.js with themeProvider and passed createTheme as prop. but it is giving me another error. I tried looking up the docs but couldn't figure it out.

styles.js

import { makeStyles } from "@mui/styles";
import { alpha } from "@mui/material/styles";

export default makeStyles((theme) => ({
  title: {
    display: "none",
    [theme.breakpoints.up("sm")]: {
      display: "block",
    },
  },
...
})
)

Header component

import React from "react";
import useStyles from "./styles";
import { AppBar, Toolbar, Typography, InputBase, Box } from "@mui/material";
import { Autocomplete } from "@react-google-maps/api";
import { SearchIcon } from "@mui/icons-material/Search";

const Header = () => {
  const classes = useStyles();
  return (
    <AppBar position="static">
      <Toolbar className={classes.toolbar}>
        <Typography variant="h5" className={classes.title}>
          Travel Companion
        </Typography>
        <Box display="flex">
          <Typography variant="h6" className={classes.title}>
            Explore new places
          </Typography>
          <Autocomplete>
            <div className={classes.search}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
              <InputBase
                classes={{ root: classes.inputRoot, input: classes.inputInput }}
                placeholder="Search"
              />
            </div>
          </Autocomplete>
        </Box>
      </Toolbar>
    </AppBar>
  );
};

export default Header;