React-CSSTransitionGroup无法处理动态内容

Question

我正在尝试为包含下拉菜单的div设置动画。有一个状态控制着何时打开或关闭下拉菜单，称为locationOpen

  constructor(props: Props) {
    super(props);
    this.state = {
      onDesktop: false,
      locationOpen: false,
      currentCity: '',
    };
    this.locationSelectDataBuilder = new LocationSelectDataBuilder({
      locale: getCurrentLocale(),
    });
  }

  handleLocationClick = () => {
    this.setState({ locationOpen: !this.state.locationOpen });
  };

<React.Fragment>
<div onClick={this.handleLocationClick}>
<p
  className={cx({
    [css.locationSelect]: true,
    [css.locationSelectText]: true,
  })}
>
  {currentCity}
</p>
</div>
{locationOpen && (
<CSSTransitionGroup
  transitionName={{
    enter: css.hide,
    enterActive: css.fromHideToShow,
    enterDone: css.show,
    exit: css.show,
    exitActive: css.fromShowToHide,
    exitDone: css.hide,
  }}
  transitionEnterTimeout={1500}
  transitionLeaveTimeout={1500}
>
  <div className={css.locationDropdownList}>
    {this.locationSelectDataBuilder.selectData().map(selectGroup => (
      <ul key={selectGroup.key}>
        <li
          key={selectGroup.key}
          label={selectGroup.name}
          className={css.locationDropdownCountry}
        >
          {selectGroup.name}
        </li>
        {selectGroup.cities.map(city => (
          <li key={city.key} onClick={this.handleCityClick(city)}>
            <div className={css.listWrapper}>{city.name}</div>
          </li>
        ))}
      </ul>
    ))}
  </div>
</CSSTransitionGroup>
)}
</React.Fragment>

这是我对过渡状态的理解

.hide {
  opacity: 0;
}

.fromHideToShow {
  opacity: 1;
}

.show {
  opacity: 1;
}

.fromShowToHide {
  opacity: 0;
}

什么都没有发生，就像没有过渡一样。.我不确定自己在做什么错