No result using makeStyles Material UI in react 18

    import { makeStyles } from "@mui/material/styles";
    
    export const useStyles =  makeStyles(() => ({
      appBar: {
        borderRadius: 15,
        margin: "30px 0",
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      },
      heading: {
        color: "rgba(0,183,255, 1)",
      },
      image: {
        marginLeft: "15px",
      },
    }));

import {styled } from "@mui/material";

const useStyles = styled((theme) => ({
  toolbarMargin: {
    ...theme.mixins.toolbar
  }
}));

const Header = () => {
  const classes = useStyles();
  return (
    <Fragment>
      <AppBar position="fixed">
        <Toolbar>
          <h1>Brand Name</h1>
          <Button variant="contained" color="error" sx={{ marginLeft: "auto" }}>
            Connect Wallet
          </Button>
        </Toolbar>
      </AppBar>
      <div className={classes.toolbar} />
    </Fragment>
  );
};