CSSTransition for an array of questions

I have an array of questions and I am trying to transition how each question moves to the next. I have tried the below code but unable to get it working. Any ideas?

<CSSTransition in={currentQuestion + 1} timeout={300} classNames={{ ...styles }}>
  <div>
    {questions[currentQuestion].questionText}
  </div>
</CSSTransition>

.exit {
    transform: translateX(0px);
    opacity: 1;
}
.exitActive {
    transform: translateX(-50px);
    opacity: 0;
    transition: transform 400ms ease-out, opacity 300ms ease-out;
}
.enter {
    opacity: 0;
    z-index: 1;
    transform: translateX(100px);
}
.enterActive {
    opacity: 1;
    transform: translateX(0px);
    transition: opacity 400ms ease-out, transform 500ms ease-out;
}