javascript - ReactTransitionGroup ライフサイクル フックが機能しない

Question

class Child extends Component {
  componentWillAppear(callback) {
    console.log('will appear');
    callback();
  }
  componentDidAppear() {
    console.log('did appear');
  }
  componentWillEnter(callback) {
    callback();
    console.log('will enter');
  }
  componentDidEnter() {
    console.log('did enter');
  }
  componentWillLeave(callback) {
    callback();
    console.log('wiil leave');
  }
  componentDidLeave() {
    console.log('did leave');
  }
  componentWillUnmount() {
    console.log('will unmount');
  }
  render() {
    return (
        <div key={this.props.children} className="item">{this.props.children}</div>
    );
  }
}


 class Carousel extends Component {
  state = {
    idx: 0,
    items: ['abc', 'def', 'hij']
  };

  onClick = ()=> {
    var idx = this.state.idx + 1;
    this.setState({
        idx: idx
    });
  };

  getChild(item) {
    return <Child>{item}</Child>;
  }

  render() {
    const idx = this.state.idx;
    const items = this.state.items;
    const item = items[idx];
    const child = this.getChild(item);
    return (
        <div>
            <ReactTransitionGroup
                component="div"
                className="carousel"
                transitionName="item"
            >
                {child}
            </ReactTransitionGroup>
            <div onClick={this.onClick} className="btn">click me</div>
        </div>
    );
  }
}

最初はReactCSSTransitionGroupでカルーセルを作りたいのですが、簡単なcssトランジションがあります。イベントを追加したいのですが、うまくいきませんでした。だから、私は ReactTransitionGroup を使いたいです。しかし、一度使用すると、いくつかのフックが機能しないために必要になりません。

すべての ReactTransitionGroup ライフサイクル フックが起動するわけではありません。上記の例では、「表示される」「表示された」のみ

ログ。

React にバグがある場合は?