react-transition-group not transitioning

Not sure why, but I can't get the questions in my questionnaire to transition into each other? Any thoughts?

I am importing correctly and have followed a few online guides.

    <TransitionGroup >
                        <CSSTransition
                            key={testQuestions.question}
                            timeout={550}
                            in={true}
                            classNames={{ ...styles }}
                        >
                            <>
                                <div className={css.questionsContainer}>
                                    <Paragraph>
                                        {currentQuestion + 1} / {testQuestions.length}
                                    </Paragraph>
                                    <Paragraph large className={css.questions}>
                                        {testQuestions[currentQuestion].questionText}
                                    </Paragraph>
                                </div>
                            </>
                        </CSSTransition>
                    </TransitionGroup >

.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;
}