Моя анимация реакции SwitchTransition не работает

Question

Когда я пытаюсь анимировать свой компонент, он не отображается на странице, но отображается на вкладке элемента. Вот как выглядит реагирующий компонент:

import React from 'react';
import { SwitchTransition, CSSTransition } from "react-transition-group";

class Reviews extends React.Component {
    constructor(props) {
        super(props);
        this.reviews = {//...}
        this.state = {
          customer: '',
          comment: '',
          activeDiv: 0
        }
    }
    
    animateReview = () => {
        if(this.state.activeDiv === this.reviews.length - 1) {
            this.setState({
                ...this.reviews[0],
                activeDiv: 0
            });
        } else {
            this.setState({
                ...this.reviews[this.state.activeDiv + 1],
                activeDiv: this.state.activeDiv + 1
            });
        }
    }
    
    componentDidMount = () => {
        this.setState({ ...this.reviews[0] });
        setInterval(() => {
            this.animateReview();
        }, 3000)
    }
    
    render() {
        const { comment, customer, activeDiv } = this.state;
        return(
            <div>
              <SwitchTransition mode="out-in">
                <CSSTransition
                 key={this.state.activeDiv}
                 addEndListener={(node, done) => {
                  node.addEventListener("transitionend", done, false);
                 }}
                 classNames="fade"
                >
                  <div className="fade">
                    <p>"{comment}"</p>
                    <p>{customer}</p>
                  </div>
                </CSSTransition>
              </SwitchTransition>
            </div>
        );
    }
}

export default Reviews;

Классы css определены для fade-enter, fade-exit, fade-enter-active и fade-exit-active. Любая помощь будет оценена по достоинству.