React CSSTransitionGroup not applying classes

Question

I must be missing something. I've looked up various examples for how to do this but I can't get mine to work. I just need to transition one element in or out.

I'm calling togglePopup() to flip the boolean in state, which correctly shows/hides div.popup-msg but the transition classes do not get applied and, obviously, the element doesn't transition in or out.

EDIT: I tried moving the popup in its own component, thinking the issue may have been with it being inside of a stateless functional component instead of directly in render(). Still no luck.

togglePopup = () => {
  let isPopupVisible = this.state.isPopupVisible;
  isPopupVisible = !isPopupVisible;
  this.setState({ isPopupVisible });
};

render() {
  const Main = () => {
    let removePopup = this.state.isPopupVisible 
      ? <div key={1} className="popup-msg">List has Been Removed</div>
      : null;

    return (
      <div className="main-wrapper">
        <CSSTransitionGroup
          transitionName="popup"
          transitionEnterTimeout={700}
          transitionLeaveTimeout={500}>
            {removePopup}
        </CSSTransitionGroup>
      </div>
    )
  };

  return (
      <div className="app-wrapper">
        <Route exact path="/" component={Main}/>
      </div>
  )

}

SASS:

.popup-enter {
  transition: opacity 700ms ease-in;
  opacity: 0.01;

  &.popup-enter-active {
    opacity: 1;
  }
}

.popup-leave {
  transition: opacity 500ms ease-in;
  opacity: 1;

  &.popup-leave-active {
    opacity: 0.01;
  }
}

Answer 1

Ok, found out that the issue was due to having the popup be inside of another component. So I guess when state got updated the parent component re-rendered and no transition effects were shown. Not sure why exactly that happens since there were no state changes that affected the parent component.

Moving the popup outside the component fixed the issue.