how do i fix Invalid hook call. Hooks can only be called inside of the body of a function component

Question

i am new to ReactJS, I am trying to an Header Component using the useStyles hook, i dont get any invalid hook call in my terminal but my localhost is not displaying anything and i get the invalid hook call in the console

index.js

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import ReactDom from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(\<App /\>);

App.js

import React from "react";
import { CssBaseline, Grid } from "@mui/material";

import Header from "./components/Header/Header";
import List from "./components/List/List";
import Map from "./components/Map/Map";

const App = () => {
  return (
    <>
      <CssBaseline />
      <Header />
      <Grid container spacing={3} style={{ width: "100%" }}>
        <Grid item xs={12} md={4}>
          <List />
        </Grid>
        <Grid item xs={12} md={8}>
          <Map />
        </Grid>
      </Grid>
    </>
  );
};

export default App;

Header.jsx

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


const Header = () => {
  const classes = useStyles();
  
  return (

    <AppBar position='static'>
      <Toolbar className='classes.toolbar'>
        <Typography variant='h5' className={classes.title}>Wander Wise</Typography>
        <Box display='flex'>
        <Typography variant='h6' className={classes.title}>Explore Your World, Your Way</Typography>
        {/* <Autocomplete> */}
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase placeholder='Explore City...' classes={{root: classes.inputRoot, input: classes.inputInput}} />
          </div>
        {/* </Autocomplete> */}
        </Box>
      </Toolbar>
    </AppBar>
  )
}

export default Header

Styles.js

import { alpha, makeStyles } from "@material-ui/core/styles";

export default makeStyles((theme) => ({
  title: {
    display: "none",
    [theme.breakpoints.up("sm")]: {
      display: "block",
    },
  },
  search: {
    position: "relative",
    borderRadius: theme.shape.borderRadius,
    backgroundColor: alpha(theme.palette.common.white, 0.15),
    "&:hover": { backgroundColor: alpha(theme.palette.commo[enter image description here](https://i.stack.imgur.com/HCDLY.png)n.white, 0.25) },
    marginRight: theme.spacing(2),
    marginLeft: 0,
    width: "100%",
    [theme.breakpoints.up("sm")]: {
      marginLeft: theme.spacing(3),
      width: "auto",
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: "100%",
    position: "absolute",
    pointerEvents: "none",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  inputRoot: {
    color: "inherit",
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0),
    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
    transition: theme.transitions.create("width"),
    width: "100%",
    [theme.breakpoints.up("md")]: { width: "20ch" },
  },
  toolbar: {
    display: "flex",
    justifyContent: "space-between",
  },
}));

apparently i copied and pasted the styles.js

Some TroubleShooting Steps i tried I checked for duplicate react version which wa initially present, but i run npm dedupe which cleared the duplicate I also made sure the react(18.0.0) and material-ui(5.14.8) are compatible