the dots were not changing when using map to display data

Hi I am using your module and I wrote like this :

          <Swiper index={this.state.index} style={styles.swipe} autoplay={false} horizontal={true}
            dotColor="transparent"
            activeDotColor="transparent"
            onIndexChanged={(index) => {
              alert("hi")
              this.setState({
                index: index,
              })
            }}>
            {swiperList.map((res,i)=>{
              let durationMinutes = res.duration / 60
              let durationText
              if (durationMinutes < 1) {
                durationText = res.duration + ' sec'
              } else if (isNaN(durationMinutes)) {
                durationText = ''
              } else {
                durationText = durationMinutes + ' min'
              }
              return(
                <View style={styles.swiperView}>
                  <View style={styles.addRoutineMainCardViewMainMorning}>
                    <Thumbnail large source={{uri : 'https:'+res.backgroundImage.file.url , cache: 'force-cache'}} style={styles.routineCreatedCardlogoimage} />
                    <Thumbnail source={Images.createroutinetimeButton['morning']} style={styles.routineCreatedCardOverlayimage} />
                  </View>
                  <Text style={styles.swiperText}>{res.title}</Text>
                  <Text style={styles.swipertimetext}>{durationText}</Text>
                </View>
              )
            }
            )}
          </Swiper>

here when I swiper the onIndexChanged is not at all calling
And I did not use lopp but my data is showing twice
Can you tell me how to fix this..

Start by reproducing the supplied Swiper example with the mapped swiperList data and inspect the Swiper entry point handling onIndexChanged and rendered children. Confirm whether the callback fires during a swipe and whether the data appears twice; done means both behaviors match the expected single rendering and callback behavior.