I am trying to create an E-Commerce platform in React JS. I am following tutorials from Youtube. I don't know whats the problem but the styles from the styles components are not applying properly, cross-checked the code with the tutor's code several code but was unable to figure out as what is the issue. Can anybody spot the issue?

Products.jsx Component

import React from 'react'
import {Card, CardMedia, CardContent, CardActions, Typography} from '@material-ui/core'
import { IconButton } from '@material-ui/core'
import { AddShoppingCart} from '@material-ui/icons'
import useStyles from './styles'

const Product = ({product}) => {

    const classes = useStyles();
    return (
        <Card className={classes.root}>
            <CardMedia className={classes.media} image={product.image} title={product.name} />
            <CardContent>
                <div className={classes.CardContent}>
                    <Typography variant="h5" gutterBottom>
                        {product.name}
                    </Typography>
                    <Typography variant="h5">
                        {product.price}
                    </Typography>
                </div>

                <Typography variant="body2" color="textSecondary">{product.description}</Typography>

                <CardActions disableSpacing className={classes.CardActions}>
                    <IconButton aria-label="Add to Cart">
                        <AddShoppingCart/>
                    </IconButton>
                </CardActions>
            </CardContent>
        </Card>
    )
}

export default Product

Styles. js file is here

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

export default makeStyles(() => ({
    root: {
        maxWidth: "100%"
    },
    media: {
        height: 0,
        paddingTop: '56.25%'
    },
    carrdActions: {
        display: 'flex',
        justifyContent: 'flex-end'
    },
    cardContent: {
        display: 'flex',
        justifyContent: 'space-between'
    }
}))

Any help is appreciated!