reactjs - React 遷移グループとアニメーション

Question

問題は、フォームに 3 つの状態 (デフォルト、エラー、成功) があることです。状態に応じて、特定のコンポーネントが dom にレンダリングされます。このコンポーネントが出入りするときに、フェードイン アウト アニメーションを追加する必要があります。

カスタム CSS、GSAP を試しましたが (ただし、プロジェクトにこれ以上パッケージをインストールしたくありません)、現在は react-transition-group を試しています。

簡単にするために、次のように「エラー」コンポーネントを作成しました。

export default class NewsletterFormError extends React.Component {
   componentWillMount() {
   }
   componentDidMount() {
   }
   render() {
      return (
        <div className="NewsletterFormError">
          I'm an error message
        <style jsx>{`
          .NewsletterFormError {
            font-size: 50px;
          }  
        `}</style>
        </div>
    )
  }
}

そして、インデックスページには次のものがあります：

    { this.state.formError &&
        <CSSTransitionGroup
        transitionName="test"
        transitionAppear={true}
        transitionAppearTimeout={200}            
        transitionEnter={true}
        transitionEnterTimeout={2000}
        transitionLeave={true}
        transitionLeaveTimeout={2000}>
          <NewsletterFormError />
        </CSSTransitionGroup>
      }

何らかの理由で、this.state.formErrorがの場合true、コンポーネントがレンダリングされ、フェード インが実行されますが、状態が に変化するfalseと、フェード アウトが機能しません。