ReactCSSTransitionGroup: Почему не работает transitionAppear?

Пытаюсь сделать плавное появление/исчезновение уведомления, но не работает transitionAppear. Делаю добавление элемента(всплытие уведомления) на событие onBlur(после того, когда делаю клик за пределами инпута). Анимация во время leave работает плавно, а во время appear просто резко появляется без transition. В Реакте совсем недавно, не ругайтесь сильно:D

CodeSandbox: https://codesandbox.io/s/l26j10613q

P.S.
Если я добавлю ReactCSSTransitionGroup в alert.js — appear работает, но leave нет.

alert.js:

export default class Alert extends Component {
  render() {
    const { icon, text } = this.props;
    let classNames = "cards-wrapper-alert";
    return (
     <div className={classNames}>
       <Card zIndex="2">
         <Icon icon={icon} eClass="alert-message-icon"/>
         <Label text={text} fw="fw-medium" fs="fs-14" fc="c-dark"/>
       </Card>
     </div>
    );
  }
}

alert.css:

.alert-appear {
  max-height: 0;
  overflow: hidden;
}
.alert-appear.alert-appear-active {
  max-height: 80px;
  transition: max-height 300ms ease-in-out;
}
.alert-leave {
  max-height: 80px;
}
.alert-leave.alert-leave-active {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-in-out;
}

input.js:

<ReactCSSTransitionGroup
  component={this.prepareComponentForAnimation}
  transitionName="alert"
  transitionEnter={false}
  transitionAppear={true}
  transitionAppearTimeout={400}
  transitionLeaveTimeout={400}>
  {this.state.alert ?
    React.cloneElement(this.props.children, {
      icon: this.state.icon,
      text: this.state.text
    })
  : null}
</ReactCSSTransitionGroup>

Example: