How to add sliding animation MUI using CSS - css

Question

I am facing an issue of adding the slide animation on the question and answer. I want on click of the radio button the slide effect comes and next question comes with Slideup animation.
<Grid item xs={12} sm={8} md={8}>
<Slide direction="up"
in={checked}
appear={true}
mountOnEnter
unmountOnExit
timeout={{ enter: 1000 , exit: checked ? 1 : 900}}
>
<Card variant="outlined" sx={{ bgcolor: "#bea"}} elevation={0}>
<CardContent>
<form onSubmit= {handleSubmit}>
<CardActions>
<Button type="submit" color="warning" variant="outlined" disabled={currentQuestion===0} className={classes.button} onClick={previousQuestion}>
Previous</Button>
</CardActions>
<FormControl component='fieldset' className={classes.formControl}
data-hidden={questions[currentQuestion].number !==
currentQuestion[questions[currentQuestion] .number]} >
<FormLabel component='legend'>
{questions[currentQuestion].question}
</FormLabel>
<FormLabel component='legend'>
{questions[currentQuestion].description}
</FormLabel>
<RadioGroup
aria-label='quiz'
name='quiz'
value={questions[currentQuestion].value}
checked={checked}
onChange={(e)=> handleRadioChange(questions[currentQuestion].number, e)}
sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}>
{options.map((option) => (
<FormControlLabel
key={option.score}
value={option.score}
control={<Radio sx={{
color: pink[800],
'&.Mui-checked': {
color: blue[600],
},
}}/>}
label={option.label}
/>
))}
</RadioGroup>
</FormControl>
<CardActions>
<Button type="submit" variant="contained" color="primary" className={classes.button} disabled={currentQuestion != 5} onClick={handleSubmit}>
Submit
</Button>
</CardActions>
</form>
</CardContent>
</Card>
</Slide>
This is not working smoothly. So please help. The problem is on click of previous button the value disappeared. The slide effect is not flawless.