ReactTransitionGroup Lifecycle Hooks Do Not Work

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>
    );
  }
}

At first, i want to make a carousel by ReactCSSTransitionGroup, but there is a simple css transition. If i want to add some events, it could not work. So, i want to use ReactTransitionGroup. But once i use it, i do not get i want for some hook do not work.

Not all ReactTransitionGroup lifecycle hooks fire! In the above examples, only 'will appear' 'did appear'

logs.

If there is a bug in React?