Как сделать анимацию формы в React?

Question

[HitGirl]

Здравствуйте!
Пытаюсь сделать анимацию перехода от формы логина к форме регистрации. Но сейчас контент формы меняется быстрее, чем заканчивается анимация. То есть сначала меняется надпись авторизация-регистрация, а потом форма уезжает вправо. Подскажите, как это можно исправить, чтобы предыдущая форма исчезла и только затем появилась новая?

import './styles/App.scss';
import {useState} from "react";
import {CSSTransition, SwitchTransition} from "react-transition-group";

function App() {
    const [formType, setFormType] = useState('login')

    return (
        <div className="bg">
            <div className="form--container">
<CSSTransition key={'login'} in={formType==='login'} timeout={500} classNames="form">
                    {formType === 'login' ?

                            <form onSubmit={() => false} className="form">
                                <h2 className="form--header">Авторизация</h2>
                            </form>
                        :
                            <form onSubmit={() => false} noValidate className="form">
                                <h2 className="form--header">Регистрация</h2>
                            </form>

                    }
                        </CSSTransition>
 <button onClick={() => setFormType(formType === 'login' ? 'registration' : 'login')}>Change form</button>
            </div>
        </div>
    );
}

export default App;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root{
  display: flex;
  flex-direction: column;
  align-items: center;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

$whitesmoke: #edeef0;
$text-dark: #444;

.bg {
  background-color: $whitesmoke;
  width: 100vw;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.form--container{
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem;
  @media (min-width: 768px){
    padding: 2rem 2.5rem;
  }
}

form {
  user-select: none;
}

.form{
  background-color: white;
  padding: 1rem 1.5rem;
  border-radius: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  @media (min-width: 640px){
    width: auto;
    height: auto;
  }

  .form--header{
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-family: TT;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: $text-dark;
  }
}

.form-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.form-enter-active {
  opacity: 1;
  transform: translateX(0%);
}
.form-exit {
  opacity: 1;
  transform: translateX(0%);
}
.form-exit-active {
  opacity: 0;
  transform: translateX(100%);
}
.form-exit-active, .form-enter-active{
  transition: opacity 500ms, transform 500ms;
}