Swiper возвращает неверный индекс в onIndexChange

Question

Big image in given screenshot is being shown in Swiper and ">" button is 
 being used to move to next Image.

 Thumbnail is being shown in separate FlatList and on click on particular, swiper image also change to shown selected image in thumbnail

Вот код swiper:

 <Swiper style={styles.wrapper} 
          loop= {false}
          onIndexChanged={(index)=>{ 
            console.log('defaul',index)
            console.log('Test_Swiper',this.state.curSelPhotoIndex)
            artWork = this.state.images[index].isArtwork;
            this.setState({curSelPhotoIndex: index, isArtwork : false})
          }}
          showsButtons={this.state.swiperBtn}
        index= {this.state.curSelPhotoIndex}
          showsPagination = {false}
          nextButton = {<Text style={{color: 'rgba(255,255,255,0.7)',fontSize: 200,fontWeight:'100',top:-80}}>›</Text>}
          prevButton = {<Text style={{color: 'rgba(255,255,255,0.7)',fontSize: 200,fontWeight:'100',top:-80}}>‹</Text>}
          loadMinimal = {true}
          loadMinimalSize = {1}
          loadMinimalLoader = { <ActivityIndicator
          animating
          style={{marginTop:250}}
            size='large'
            color='white'
          /> }

          >
          {
              this.state.images.length > 0 ? this.state.images.map((value, index) => {
                imageURL = getLocalURL(this.state.images[index].localIdentifier)
                return (
            <View style={styles.mainView} key={index}>
              {/* resizeMode= enum('cover', 'contain', 'stretch', 'repeat', 'center') */}
              <Image
                source={(imageURL == "")?require('../Images/defaultImg.png'):{ uri: imageURL }}
                style={styles.image}
                resizeMode='cover'
                ></Image> 
                {
                  isCurSelChanging ?
                    <ActivityIndicator
                      animating
                      style={{marginTop:250}}
                      size='large'
                      color='white'
                    />
                  : null
                }
                <View style={styles.flatListTagStyle} >
                <ScrollView 
                horizontal = 'true'
                showsHorizontalScrollIndicator={false}
                >
                <View style={styles.flatListFirstFiveTagWrapStyle} >
                <FlatList
                  style={[styles.flatListFirstFiveTagStyle]}
                  contentContainerStyle={styles.flatListTagContentStyle}
                  data={this.state.dataTag}
                  renderItem={({item, index}) => this.renderItemTagFirstFive(item, index)}
                  keyExtractor={(item, index) => index}
                  extraData={this.state}
                  />
                <FlatList
                  style={[styles.flatListFirstFiveTagStyle]}
                  contentContainerStyle={styles.flatListTagContentStyle}
                  data={this.state.dataTag}
                  renderItem={({item, index}) => this.renderItemTagFirstThree(item, index)}
                  keyExtractor={(item, index) => index}
                  extraData={this.state}
                  />
                </View>
                <FlatList
                  horizontal = 'true'
                  showsHorizontalScrollIndicator={false}
                  style={styles.flatListNextTagStyle}
                  contentContainerStyle={styles.flatListTagContentStyle}
                  data={this.state.dataTag}
                  renderItem={({item, index}) => this.renderItemTagNextToFive(item, index)}
                  keyExtractor={(item, index) => index}
                  extraData={this.state}
                  /> 

                </ ScrollView>
                  </View>



            </View>)
              }) : <View></View>
            }
          </Swiper>

Вот код миниатюры Flatlist:

 <FlatList
                horizontal= 'true' 
                style={styles.wrapper}            
                data={this.state.images}
                renderItem={({item, index}) => this.renderItem(item, index)}
                keyExtractor={(item, index) => index}
                extraData={this.state.curSelPhotoIndex}
                scrollToIndex={this.state.curSelPhotoIndex}
              /> 

вот метод renderItem:

renderItem (item, index) {
    const imageURL =  getLocalURL(item.localIdentifier)
  //console.log('check_index', index)
    return (
      <TouchableOpacity  onPress={() => this.onPressSubImg(index)}>


          <Image
            source={{ uri: imageURL }}
            style={styles.subImage}
            ></Image>
            {
              (this.state.curSelPhotoIndex == index)?
                <Text style={styles.dot}>.</Text>
              : <Text></Text>
            }

      </TouchableOpacity>
    )
  }

Вот метод получения вызова по нажатию на миниатюру:

onPressSubImg (index) {
    console.log('check_sub', index)

    this.setState({isCurSelChanging: true, curSelPhotoIndex: index})
    setTimeout(() => {this.assignCategories(index)}, 100)
  }

Вот я обновляю значение curSelPhotoIndex: индекс, который должен показывать текущее изображение в swiper, используя index= {this.state.curSelPhotoIndex} Он работает нормально, но после выбора изображения, чтобы показать из эскиза, если я изменяю изображение, используя следующую кнопку, я получать вызов

onIndexChanged={(index)=>{ 
            console.log('defaul',index)
            console.log('Test_Swiper',this.state.curSelPhotoIndex)
            artWork = this.state.images[index].isArtwork;
            this.setState({curSelPhotoIndex: index, isArtwork : false})
          }}

Здесь параметр индекса возвращает неверное значение, иногда он возвращает индекс, который превышает длину массива.