我的SwitchTransition反应动画不起作用

Question

当我尝试对组件进行动画处理时，它不会显示在页面上，而是显示在“元素”选项卡中。这是react组件的样子：

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类适用于淡入，淡出，活跃入和活跃退出。任何帮助将不胜感激。