Как добавить эффект затухания при удалении компонента из DOM?

Question

У меня есть ErrorFadeInDown компонент, который используется, чтобы показать ошибку моего приложения. Эффект (CSS) ошибки -> Окно ошибок опускается сверху вниз. Этот компонент визуализируется с эффектом затухания, для которого я использовал styled-components вместе с react-animations библиотека.
На данный момент, ErrorFadeInDown визуализируется с эффектом затухания, но при закрытии закрывается без эффекта. Я хочу знать, как добавить эффект исчезновения?

import React from "react";
import styled, { keyframes } from "styled-components";
import { fadeInDown } from "react-animations";
import PropTypes from "prop-types";

const fadeInDownAnimation = keyframes`${fadeInDown}`;

const ErrorBox = styled.div`
  position: relative;
  animation: 500ms ${fadeInDownAnimation};
  position: fixed;
  background: #c62828;
  padding: 5px 20px 5px 5px;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
  box-shadow: 0px 0.1px 2px 1px white;
  z-index: 2001;

  ._error_message {
    color: white;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bolder;
  }

  button {
    /* CSS for the close button of error */
  }
`;

class ErrorFadeInDown extends React.Component {

  render() {
    return (
      <ErrorBox onClick={this.props.clearError}>
        <span className="_error_message">{this.props.errorMessage}</span>
        <span>
          <button onClick={this.props.clearError}>&times;</button>
        </span>
      </ErrorBox>
    );
  }
}

ErrorFadeInDown.propTypes = {
  errorMessage: PropTypes.string.isRequired,
  clearError: PropTypes.func.isRequired
};

export default ErrorFadeInDown;

И вот как вызывается предупреждение об ошибке:

    {error && (
      <ErrorFadeInDown
        errorMessage={error}
        clearError={clearError}
      />
    )}

react-animations библиотека имеет fadeOutUp эффект, но я не знаю, как добавить его при закрытии события. Есть идеи, как добавить эффект затухания?