Can't Make MouseEnter and MouseLeave Animation on React - css

Question

I'm new at react. I'm using media cards to present some picture and small text and have been trying to give small sliding animation to my text and background layer. However I failed. Codes are below:
import React, { useState, Component } from 'react';
import { makeStyles } from '#material-ui/core/styles';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Typography from '#material-ui/core/Typography';
import Grid from '#material-ui/core/Grid';
import Paper from '#material-ui/core/Paper';
export default function SectionCard(props) {
const [areaHeight, setAreaHeight] = useState(100);
const [imgSize, setImgSize] = useState(1);
const [lineColor, setLineColor] = useState('dodgerblue');
const [textPosition, setTextPosition] = useState(0);
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: 345,
},
media: {
height: 400,
scale: imgSize,
},
greyCover: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
height: areaHeight,
width: '100%',
bottom: 0,
position: 'absolute',
},
line: {
backgroundColor: lineColor,
height: 5,
width: '100%',
borderRadius: 0,
},
textPosition: {
paddingTop: textPosition,
fontFamily: 'Quicksand !important',
color: 'white !important',
},
body: {
fontFamily: 'Quicksand !important',
},
}));
const classes = useStyles();
return (
<Grid item xs={12} sm={4} onMouseEnter={() => (setAreaHeight('100%'), setLineColor('red'), setImgSize(1.2), setTextPosition('150px!important'))} onMouseLeave={() => (setAreaHeight(100), setLineColor('dodgerblue'), setImgSize(1), setTextPosition('0px !important'))}>
<CardActionArea>
<CardMedia
className={classes.media}
image={props.img}
/>
<CardContent className={classes.greyCover} style={{ fontFamily: 'Quicksand', }}>
<div className={classes.textPosition}>
<Typography gutterBottom variant="h5" component="h2" align="center">
{props.title}
</Typography>
<Typography component="p" align="center">
{props.text}
</Typography>
</div>
</CardContent>
</CardActionArea>
<Paper className={classes.line} />
</Grid>
);
}
Codes are probably messy. Sorry for that. onMouseEnter and onMouseLeave are working fine. I just want to see that greyCover class and text moves slowly to height 100% and text to mid of the frame.
I didn't want to use another packages yet I don't know how to use too to be honest.
What I'm doing wrong?