Анимация при размонтировании с помощью React и react-transition-group

Я работаю с React, и я пытаюсь создать компонент Fade с React-transition-group для постепенного появления и исчезновения элемента в зависимости от условия, хранящегося в состоянии: http://reactcommunity.org/react-transition-group/css-transition/

Вот что у меня сейчас:

import React from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";

import "./styles.css";

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mounted: false
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        mounted: true
      });
    }, 10);
  }
  render() {
    return (
      <div className = "root">
        <CSSTransition
          in = {this.state.mounted}
          appear = {true}
          unmountOnExit
          classNames = "fade"
          timeout = {1000}
        >
          {this.state.mounted ? (
            <div>
              <button
                onClick = {() => {
                  this.setState({
                    mounted: !this.state.mounted
                  });
                }}
              >
                Remove
              </button>
              <div>COMPONENT</div>
            </div>
          ) : (
            <div />
          )}
        </CSSTransition>
      </div>
    );
  }
}

Вот CSS

.fade-enter {
    opacity: 0;
    transition: opacity .5s ease;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity .5s ease;
}

.fade-exit {
    opacity: 1;
    transition: opacity .5s ease;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity .5s ease;
}

Когда компонент установлен, непрозрачность изменяется от 0 до 1 с 0,5 с. Но когда он размонтирован, он не анимируется: компонент исчезает без перехода.

Я сделал песочницу с этим компонентом, чтобы проверить это: https://codesandbox.io/s/k027m33y23 Я уверен, что это частый случай, но я не могу найти способ оживить компонент при размонтировании. Если у кого-то есть идеи, мы будем очень рады!

-- РЕДАКТИРОВАТЬ -- Как сказал @IPutuYogaPermana, условный рендеринг внутри CSSTransition не требуется. Итак, это:

{this.state.mounted ? (
<div>
    <button
    onClick = {() => {
        this.setState({
        mounted: !this.state.mounted
        });
    }}
    >
    Remove
    </button>
    <div>COMPONENT</div>
</div>
) : (
<div />
)}

Должно быть так:

<div>
    <button
    onClick = {() => {
        this.setState({
        mounted: !this.state.mounted
        });
    }}
    >
    Remove
    </button>
    <div>COMPONENT</div>
</div>

Компонент будет автоматически монтироваться или размонтироваться в зависимости от атрибута in в компоненте CSSTransition. Вот последний код в кодовой ячейке: https://codesandbox.io/s/62m86nm7qw