index property is not working

[jothikannan]

class ProductSlider extends Component{
  constructor(props){
    super(props);
    this.state = {
       items :[]
    };
   
  }

  componentDidMount() {
    const {navigation} = this.props;
      navigation.addListener ('willFocus', () =>{
        console.log('will foucs');
        this.setState({ items: [{
          uri: "http://www.lovethemountains.co.uk/wp-content/uploads/2017/05/New-Outdoor-Sports-and-Music-Festival-For-Wales-4.jpg",
          title: "Michael Malik",
          text: "Minnesota, USA",
      },
      {
          uri: "http://blog.adrenaline-hunter.com/wp-content/uploads/2018/05/bungee-jumping-barcelona-1680x980.jpg",
          title: "Victor Fallon",
          text: "Val di Sole, Italy",
          duration: 3000
      },
      {
          uri: "https://greatist.com/sites/default/files/Running_Mountain.jpg",
          title: "Mary Gomes",
          text: "Alps",
          fullWidth: true
      }]
      })
    });
  }

  closeSlider(){
    console.log('close slider');
    this.props.navigation.navigate('HomeScreen');
}

  
    render() {
      const { items } = this.state;
      console.log(items);
    return (
        <TimedSlideshow
            items={items}
            index={0}
            onClose={this.closeSlider.bind(this)}
        />
    );
}

  }; 
  export default ProductSlider;

I am always setting the items in componentDidMount with react-navigation willFocus listener which should be called every time I go to the screen and state gets updated and the TimedSlideshow component should render every time with index={0}. But TimedSlideshow always playing in the background and it showing different slide each time