problem with @material-ui/core/styles: does not contain an export named 'makeStyles'

First of all I have to say that I have this problem for more than 2 days and I don't really know what to do more, I searched all over stack overflow and there where some questions that where quit exactly to my question, I tried them, and none of them worked, I searched for documentation and I followed, however I don't know if I was doing it right.

I have to say that I just started to learn React.

Okay, so the error occurs when I use npm start, in the terminal, I got a Failed to compile, and an error is shown up in the browser:

4:16-26 '@material-ui/core/styles' does not contain an export named 'makeStyles

I have to mention that i named my js file as styles.js, later on i renamed it as Component.styles.js, because like that react would know it's a style file, i don't really know if it works, however i will let the source where i found it, if you want to check it: https://towardsdev.com/use-your-makestyles-7d347f9a3e96

Then i have a App.js where i import the js style, like this:

 import useStyles from './yourComponent.styles.js';

This is my:

yourComponent.styles.js:

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

const useStyles = makeStyles({
  BarStylee: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default useStyles;

And this is my:

App.js:

import React from 'react';
import {Container,AppBar,Typography,Grow,Grid} from '@material-ui/core';
import pens from'./images/pencils.jpg';
import Posts from '../src/components/Posts/Posts.js';
import Form from '../src/components/Form/Form.js';
import useStyles from './yourComponent.styles.js';
const App = () => {
    const classes = useStyles();
    return (
        <Container maxidth="lg">
            <AppBar className={classes.BarStyle} position="static" color="inherit">
                <Typography variant="h2" align="center">School</Typography>
                <img  src={pens} alt="pencils" height="150"/>
            </AppBar>
            <Grow in>
                <Container>
                    <Grid container justify="space-between" alignItems="stretch" spacing={3}>
                        <Grid item xs={12} sm={7}>
                            <Posts />
                        </Grid>
                        <Grid item xs={12} sm={4}>
                            <Form />
                        </Grid>
                    </Grid>
                </Container>
            </Grow>
        </Container>
    );
}
export default App;

Thanks!!