Material UI makeStyles breaks my components styles when I'm importing

Question

so I'm using next@material-ui on a react project. The issue is when import my makeStyle hook into Navbar it breaks my CSS on the rest of the App. Here is my project structure:

Index.js

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <React.Fragment>
          <CssBaseline />
          <App />
        </React.Fragment>
      </ThemeProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar /> // <-- I'm trying to import makeStyles into this component
        <Switch>
          <PrivateRoute exact path="/" component={Home} />
          <PrivateRoute exact path="/new" component={CreatePost} />
          <PrivateRoute exact path="/about" component={AboutMe} />
          <PrivateRoute exact path="/post/:id" component={Post} />
          <PrivateRoute exact path="/t/:id" component={TagPage} />
        </Switch>
      </Router>
    </div>
  );
}

Navbar.jsx

 import useStyles from '../../styles/layout/navbar.styles';

const Navbar = (props) => {
   const classes = useStyles();
   ...

It breaks all my css ex:

EG brefore import

EG after import

navbar.styles.js

import { makeStyles } from '@material-ui/core';

import { blueGrey, indigo } from '@material-ui/core/colors';

const useStyles = makeStyles((theme) => ({
  navBar: {
    backgroundColor: theme.palette.background.paper,
    color: blueGrey[900],
    borderBottom: '1px solid #e2e2e2',
  },
}));

export default useStyles;

as you guys can see it cramps everything together, how can I fix this issue? is a problem how I structured my project? I don't understand. Thank you very much for your time guys!