оставить и войти не работают в ReactCSSTransitionGroup

Question

В моем проекте appear работает хорошо. Однако я не могу понять, почему enter и leave не работают.

То же самое происходит с маршрутизаторами. Когда страница загружается, анимация работает. Но когда вы переключаетесь на другую страницу, все происходит внезапно.

В чем может быть проблема?

import React, { Component } from "react";
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import InputMask from 'react-input-mask';

import Close from '../images/cancel.svg';
import './fonts.css';
import './Modal.css';

class Modal extends Component {
state = {
    email: '',
    name: '',
    phone: '',
    message: ''
};

handleSubmit = (e) => {
    e.preventDefault();
    console.log('form is submitted. Email value is ', this.state);
    e.target.reset();
};

handleInputChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
};

onClose = (e) => {
  this.props.onClose && this.props.onClose(e);
};

render() {
    if( !this.props.show ) {
        return null;
    }
    return (
        <div>

            {this.props.children}
            <ReactCSSTransitionGroup
                transitionName="OverlayTransition"
                //transitionAppear={true}
                //transitionAppearTimeout={1300}
                transitionEnterTimeout={1300}
                transitionLeaveTimeout={1300}
            >
                <div className="Modal-block-wrap" onClick={(e) => { this.onClose(e) }}> </div>
            </ReactCSSTransitionGroup>

            <ReactCSSTransitionGroup
                transitionName="WrapTransition"
                transitionAppear={true}
                transitionAppearTimeout={700}
            >
                <div className="Modal-block-wrapper"> </div>
            </ReactCSSTransitionGroup>

            <ReactCSSTransitionGroup
                transitionName="ModalTransition"
                transitionAppear={true}
                transitionAppearTimeout={1300}
            >

                <div className="Modal-block">
                    <button className="Modal-block-close" onClick={(e) => { this.onClose(e) }} type="button">
                        <img src={Close} alt="close"/>
                    </button>
                    <div className="Modal-form">
                        <form onSubmit={this.handleSubmit} >
                            <h2>Some Text</h2>
                            <input
                                type="text"
                                name="name"
                                placeholder="Имя"
                                value={this.state.name}
                                onChange={this.handleInputChange}
                                required
                            />
                            <input
                                name="email"
                                type="email"
                                placeholder="E-mail"
                                value={this.state.email}
                                onChange={this.handleInputChange}
                                required
                            />
                            <InputMask
                                name="phone"
                                type="tel"
                                mask="+38(999)999-99-99"
                                placeholder="Телефон"
                                maskChar=" "
                                value={this.state.phone}
                                onChange={this.handleInputChange}
                                required
                            />
                            <input
                                name="message"
                                type="text"
                                placeholder="Сообщение"
                                value={this.state.message}
                                onChange={this.handleInputChange}
                            />
                            <button>Отправить</button>
                        </form>
                    </div>
                </div>

            </ReactCSSTransitionGroup>

        </div>
    );
}
}

export default Modal;

Мой стиль CSS

.OverlayTransition-appear {
    opacity: 0.01;
 }
.OverlayTransition-appear.OverlayTransition-appear-active {
    opacity: 1;
    transition: all 0.4s ease;
    transition-delay: 0.9s;
}
.WrapTransition-appear {
    opacity: 0.7;
    transform: translateY(100%);
 }

.WrapTransition-appear.WrapTransition-appear-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.7s ease;
}


.ModalTransition-appear {
    opacity: 0.8;
    transform: translateX(100%);
}

 .ModalTransition-appear.ModalTransition-appear-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.7s ease;
    transition-delay: 0.6s;

  }