Animation on form React

I am stuck, I am adding amination on form on every radio button click, next question should Slide Up , but this is not happening sliding is happening only on first question.

<CSSTransition classNames="fade"
    in={expanded}
    timeout={300}
    
    unmountOnExit
  >   
        <Card variant="outlined" sx={{ bgcolor: "#bea"}} elevation={0}>
            <CardContent>
           
            <form onSubmit= {handleSubmit}>
                    <CardActions>
                  <Button type="submit" color="warning" variant="outlined" 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}
      onChange={(e)=> handleRadioChange(questions[currentQuestion].number, e)}
      sx={{
        color: pink[800],
        '&.Mui-checked': {
          color: pink[600],
        },
      }}>
      {options.map((option) => (
        <FormControlLabel
          key={option.score}
          value={option.score}
          control={<Radio  sx={{
            color: pink[800],
            '&.Mui-checked': {
              color: pink[600],
            },
          }}/>}
          label={option.label}
        />
      ))}
    </RadioGroup>
  </FormControl>

                    <CardActions>
                    <Button type="submit" variant="outlined" color="primary" className={classes.button} onClick={handleSubmit}>
                    Submit
                </Button>
              </CardActions>

                </form>
          
             
                </CardContent>
                </Card>
                </CSSTransition>

The css is

.fade-enter {
    opacity: 0;
  }
  
  .fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 0.5s ease-in-out 0.3s;
  }
  
  .fade-leave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
  }
  
  .fade-leave.fade-leave-active {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

The animation is not working. Please help in finding out. I want every question to fade Out on radio button click. But this occurs only on the first but after that there is no transition.