Uncaught Error: (0 , _index__WEBPACK_IMPORTED_MODULE_0__.createMakeAndWithStyles) is not a function

Question

import { makeStyles } from "tss-react/mui";
import color from "@/styles/colors";

export const useStyles = makeStyles()(() => ({
  root: {
    backgroundColor: color.white,
    color: color.black,
  },
}));

import React from "react";
import Link from "next/link";
import { useStyles } from "./Header.styles";
type Props = {};

const Header = (props: Props) => {
  const { classes } = useStyles();
  return <header className={classes.root}></header>;
};

export default Header;

It is just giving error it is not working I have just installed and added but it is not working here is the dependency file

"dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.15.14",
    "next": "14.1.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tss-react": "^4.9.6"
  },