Проблема с анимацией выхода и входа с использованием группы реакций-переходов

Я новичок в React и мне нужна помощь.

Я пытаюсь создать простую страницу входа. Страница предоставляет пользователям три варианта («войти с помощью электронной почты», «войти с помощью Google» или «зарегистрироваться») и отображает компонент, основанный на выбранном варианте.

Я хотел добавить простое плавное затухание, когда эти компоненты входят и выходят из DOM, поэтому я обратился к react-transition-group.

Проблема, однако, в том, что мои компоненты не выходят и не входят должным образом. Старый компонент, кажется, исчезает мгновенно, а не исчезает, две копии «нового» компонента накладываются друг на друга. Одно затухает, а другое появляется. Старое и новое не плавно переходят друг в друга, как мне бы хотелось.

Пример:

Начальная страница входа

При щелчке появляются две копии «нового» компонента, одна появляется, а другая исчезает.

переход завершен, и контейнер теперь содержит новый компонент по желанию

Я просмотрел документы для группы реагирования, но не могу понять, что я делаю неправильно.

Вот мой основной компонент:

class LoginPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            display: "loginInitial"
        }
    };

    handleEmailLogin = () => {
        this.setState(() => ({
            display: "emailLogin"
        }))     
    };

    handleGoogleLogin = () => {
        console.info("Logging in with google!")
        this.props.startGoogleLogin()
    };

    handleEmailSignUp= () => {
        this.setState(() => ({
            display: "emailSignUp"
        }))     
    };

    handleBackToStart = () => {
        this.setState(() => ({
            display: "loginInitial",
        }))     
    }

    displayBox = () => {
        if (this.state.display === "loginInitial") {
            return <LoginPageInitial
                handleEmailLogin = {this.handleEmailLogin}
                handleGoogleLogin = {this.handleGoogleLogin}
                handleEmailSignUp = {this.handleEmailSignUp}
                />
        } else if (this.state.display === "emailSignUp") {
            return <LoginPageEmailSignUp
                handleBackToStart = {this.handleBackToStart}
                    />
        } else if (this.state.display === "emailLogin") {
            return <LoginPageEmailLogin
                handleBackToStart = {this.handleBackToStart}
                    />
        }
    }

    render() {
        return (
            <div className = "box-layout">
            <div className = "box-layout__box">
                <h1 className = "box-layout__title">My app</h1>
                <p>Subtitle goes here blah blah blah blah.</p>
                    <TransitionGroup>
                            <CSSTransition
                                classNames = "fade"
                                timeout = {600}
                                key = {this.state.display}
                            >
                            {this.displayBox}
                            </CSSTransition>
                    </TransitionGroup>
            </div>
        </div>
        )
    };
}

const mapDispatchToProps = (dispatch) => ({
    startGoogleLogin: () => dispatch(startGoogleLogin())
})

export default connect(undefined, mapDispatchToProps)(LoginPage)

И вот соответствующий CSS:

.box-layout {
    align-items: center;
    background: url('/images/bg.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.box-layout__box {
    background: fade-out(white,.15);
    border-radius: 3px;
    text-align: center;
    width: 30rem;
    padding: $l-size $m-size
}

.box-layout__title {
    margin: 0 0  $m-size 0;
    line-height: 1;
}

// FADE
// appear
.fade-appear {
    opacity: 0;
    z-index: 1;
}

.fade-appear.fade-appear-active {
    opacity: 1;
    transition: opacity 600ms linear;
}

// enter
.fade-enter {
    opacity: 0;
    z-index: 1;    
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 600ms linear;    
}

// exit
.fade-exit {
    opacity: 1;
}

.fade-exit.fade-exit-active {
    opacity: 0;
    transition: opacity 600ms linear;    
}

Я был бы признателен очень сильно, если кто-нибудь может дать совет. Я много гуглил, но не нашел решения своей проблемы.

[Обновлено: MOSTLY SOLVED — мне удалось решить основную часть моей проблемы. Похоже, мне нужно было разместить свою «ключевую» опору в моем компоненте, а не в компоненте. Две версии «нового» компонента больше не появляются, и контейнер не растягивается. Однако оказалось, что «старый» компонент все еще не исчезает, как я ожидал. Хотя выглядит намного лучше, чем было. Я приветствую любое дальнейшее понимание того, что я делал/делаю неправильно или как я могу улучшить свой код.)