create a transition on every submit click with a new form

Question

Ok so I have been trying this for a moment and I don't know how to go about it, what I want is simple, generate a brand new form but with a react transtion group effect from the old form to the new form (everytime a user clicks the submit button)

you are a lifesaver if you can provide help or a thought.

this.state.transitionTimes I tried to increment a state key maybe watch that but it doesn't work

 <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>

submit buttons

<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
                }
              />

My submit button

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

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

  };