I am using the selectedItem prop to control my slide position. It works fine, but when I am trying to override onClickItem it has to be clicked on twice to execute the function I give it. In my case, I want any slide clicked on to return to the first slide (just for testing).

Currently:
first click: the position moves to the clicked slide
second click: the position is 0

What I expect:
first click: the position is 0

constructor(props){
        super(props)
        this.settings = {
            onChange: this.updateCurrentSlide,
            onClickItem: this.clickOnItem
        }

        this.state = {
            currentSlide: 1
        }
    }

    clickOnItem = (clickedSlide) => {
        this.setState({currentSlide: 0});
    }

   render(){
           <Carousel {...this.settings} selectedItem={this.state.currentSlide}>{this.props.children} 
     </Carousel>
}