Material-UI v5: makeStyles's not being imported - reactjs

Question

When I am trying to import "makeStyles" using :
import { makeStyles } from '#mui/styles';
it's not working. The page becomes blank when I run.
But It's working when I change the code and use V4:
import { makeStyles } from "#material-ui/core/styles";
I've installed alll the dependencies that is required. Why It's not working using V5 of material-ui?
Here is my code (styles.js):
import { makeStyles } from "#mui/material";
export default makeStyles((theme) => ({
title: {
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
},
}));
Header.jsx:
import React from "react";
import { AppBar, Toolbar, Typography, InputBase, Box } from "#mui/material";
import SearchIcon from "#mui/icons-material/Search";
import useStyles from "./styles";
const Header = () => {
const classes = useStyles();
return (
<AppBar position="static">
<Toolbar>
<Typography variant="h5" className={classes.title}>
Travel Advsior
</Typography>
<Box display="flex">
<Typography variant="h6" className={classes.title}>
Explore new places
</Typography>
<div>
<div>
<SearchIcon />
</div>
<InputBase placeholder="Search..." />
</div>
</Box>
</Toolbar>
</AppBar>
);
};
export default Header;