How does Nested Transitions work With React Transition Group

Question

So I'm having some trouble getting nested transitions to work with ReactTransitionGroup. What I am trying to achieve is I have an off canvas menu that appears on click (which is working) then within this off canvas menu there is a list of sections which when clicked, should fade out and some info related to this section should fade in. This action should be toggleable to switch between the sections and info. I am at a point where the info is toggleable, and I can see the different stages of the animation (entered, entering, exiting, exited) but they are static and there is no animation. Almost happens in 4 separate phases.

Here is my code:

const Fade = ({ children, ...props }) => (
  <TransitionGroup appear>
    <Transition appear in={props.visible} timeout={0}>
      {(state) => (
        <div>
          <div onClick={props.onPress} style={{
            ...wrapperStyle,
            ...transitionStyles.wrapper[state]
          }} />
          <div style={{
            ...innerStyle,
            ...transitionStyles.inner[state]
          }}>
            <TopSection>
              <H3 white>Support</H3>
              <Icons.FaClose className='closeIcon' onClick={props.toggleContent} size={20} />
            </TopSection>
            <Transition appear in={props.contentVisible} timeout={300}>
              {(state) => (
                <div style={{ ...sectionStyle, ...transitionStyles.sectionOpposite[state] }}>
                  { props.renderSections() }
                </div>
              )}
            </Transition>
            <Transition appear in={!props.contentVisible} timeout={300}>
              {(state) => (
                <div style={{ ...sectionStyle, ...transitionStyles.sectionOpposite[state] }}>
                  { props.article }
                </div>
              )}
            </Transition>
          </div>
        </div>
      )}
    </Transition>
  </TransitionGroup>
)

Then I call the Fade component on render:

render () {
    return (
      <Fade onPress={() => this._hideModal()}
        renderSections={this._renderSections}
        in={this.state.visible}
        article={this.state.activeArticle}
        contentVisible={this.state.contentVisible}
        toggleContent={() => this._toggleContent()} />
    )
  }

And here is the style code that's called during the different phases of the transition:

section: {
    entering: {
      opacity: 1,
      transform: 'translateY(0) scale(1)',
      visibility: 'visible'
    },
    entered: {
      opacity: 0,
      transform: 'translateY(50px) scale(0.9)',
      visibility: 'hidden'
    },
    exiting: {
      opacity: 0,
      transform: 'translateY(50px) scale(0.9)',
      visibility: 'hidden'
    },
    exited: {
      opacity: 1,
      transform: 'translateY(0) scale(1)',
      visibility: 'visible'
    }
  },
  sectionOpposite: {
    entering: {
      opacity: 0.5,
      transform: 'translateY(30px) scale(0.9)'
    },
    entered: {
      opacity: 1,
      transform: 'translateY(0) scale(1)'
    },
    exiting: {
      opacity: 0.5,
      transform: 'translateY(30px) scale(0.9)'
    },
    exited: {
      opacity: 0,
      transform: 'translateY(50px) scale(0.9)'
    }
  }

Each of the 'in' props of the different transitions are being toggled in SetState helper methods which are working as expected, just no animations when these are changed!