Another case of React CSS Transitions not applying classes

Question

I am trying to get my React CSS Transition classes applied to my DOM elements. I have done all of the following:

Referenced this question, to check correct use case and this other question making sure I am using a key attribute even when rendering one child.

If I am understanding correctly the library has migrated and the way we import the library is a little different, but let's look at what I'm working with.

Relevant code:

import {CSSTransitionGroup} from "react-transition-group";

class NewTournament extends React.Component{
render(){



      const style = {

          active: { display: "flex", flex: 5 },
          inactive: null
      }

      const dynamic = this.props.editTournament != null ? style.active : style.inactive

      return(
        <div className="left-column">

            <div className="tournament-creator">

                  <div id="banner">
                    <h1>Build A Tournament Here</h1>
                  </div>  

                  <form action="" className="tournamentBuilder">
                    <input type="text" placeholder="Tournament Name" ref="nameRef" onChange={() => this.recordName()}/>
                    <input type="number" defaultValue={prelims} ref="prelimRef" onChange={() => this.updatePrelims()} />
                    <input type="number" defaultValue={outRounds} ref="outRoundRef" onChange={() => this.updateOutround()}/>
                    <input type="text" placeholder="Notes" ref="notesRef" onChange={() => this.recordNote()}/>
                  </form>

                  <div id="submitButton" onClick={() => this.createTournament()}>
                    Create Tournament
                  </div>


            </div>
            <CSSTransitionGroup   className="tournament-editor"
                                  component="div"
                                  transitionName="editBoxRail"
                                  transitionEnterTimeout={10000}
                                  transitionLeaveTimeout={10000}
                                  style={dynamic}>

                  <TournamentEditor key="editor" />
            </CSSTransitionGroup>

        </div>
        )
      }
    }

So you click a button in the UI and then the tournament editor component goes from display: none to display: flex. It is my understanding that this will trigger the classes to be applied and taken away, but they are never applied the only way I have been successful in doing so is adding the transitionAppear={true} attribute where they just sit there and never go away.

What am I not doing correctly? This has me stumped because I've successfully worked with the older library and I don't know why this is giving me so much trouble.