создать переход при каждом нажатии кнопки с новой формой

Question

Хорошо, поэтому я пытался это на мгновение, и я не знаю, как go об этом, то, что я хочу, это просто, создать совершенно новую форму, но с эффектом группы реакции перехода от старой формы к новая форма (каждый раз, когда пользователь нажимает кнопку отправки)

вы спасатель, если можете оказать помощь или подумать.

this.state.transitionTimes Я пытался увеличить ключ состояния, возможно, посмотрите, что но это не работает

 <div disabled={currentAccommodation.isLoading || currentRoom.isLoading} className="accommodation_popup_innerContainer_inputContainer_transition_container">
            <SwitchTransition>
              <CSSTransition
                key={this.state.isAddRoom}
                addEndListener={(node, done) =>
                  node.addEventListener('transitionend', done, false)
                }
                classNames="fade"
              >
                {(isAddRoom || this.state.isAddRoom) === true ? (
                  <CreateRoomForm
                    ScrollBar={ScrollBar}
                    LabelInput={LabelInput}
                    currentState={this.state}
                    handleChange={() => this.handleChange}
                    removeItem={this.removeItem}
                    handleMultipleChange={this.handleMultipleChange}
                    setTheState={this.setTheState}
                    error={this.state.error}
                  />
                ) : (                                       // I want the transition on this side
                  <cssTransition
                      key={this.state.transitionTimes}
                      addEndListener={(node, done) =>
                        node.addEventListener('transitionend', done, false)
                      }
                      classNames="fade">
                      <CreateAccommodationForm
                        ScrollBar={ScrollBar}
                        LabelInput={LabelInput}
                        currentState={this.state}
                        handleChange={() => this.handleChange}
                        removeItem={this.removeItem}
                        handleMultipleChange={this.handleMultipleChange}
                        setTheState={this.setTheState}
                        OnChangeDescription={this.OnChangeDescription}
                        error={this.state.error}
                  />
                  </cssTransition>

                )}
              </CSSTransition>
            </SwitchTransition>
          </div>

кнопки отправки

<Button
                type="submit"
                className="btn accommodation_popup_innerContainer_buttons_button"
                value={isAddRoom ? 'Add' : 'Submit'}
                onClick={
                  (isAddRoom || this.state.isAddRoom)
                    ? this.handleAddRoomBtn // for the top form
                    : this.handleSubmitBtn  // for th bottom form
                }
              />

Моя кнопка отправки

 handleAddRoomBtn = async (e) => {
    e.preventDefault();

    await this.setState({
      ...this.initiaState,
      transitionTimes: this.state.transitionTimes + 1
    })
    console.log(this.state)

  };