Autoplay on Swiper carousel doesn't work in React Native

I'm trying to implement autoplay on the swiper, but it doesn't seem to work, does anyone know how to fix it? The code is TSX I'm using React Native.

To the ones who are wondering what am i doing, I'm creating a carousel with some mangas that I'm going to implement in my homepage.

      useEffect(() => {
        const fetchData = async () => {
          try {
            const resp = await axios({
              method: 'GET',
              url: `${baseUrl}/manga?limit=7&includedTagsMode=AND&excludedTagsMode=OR&contentRating%5B%5D=safe&order%5BlatestUploadedChapter%5D=desc&includes%5B%5D=manga&includes%5B%5D=cover_art`
            });
            const mangaData = resp.data.data;
            const mangaPromises = mangaData.map(async (manga: any) => {
              const respCover = await axios({
                method: 'GET',
                url: `${baseUrl}/manga/${manga.id}?includes[]=author&includes[]=artist&includes[]=cover_art`
              });
              const coverIndex = respCover.data.data.relationships.findIndex((i: any) => i.attributes.fileName);
              const mangaFileName = respCover.data.data.relationships[coverIndex].attributes.fileName;
              return {
                id: manga.id,
                title: manga.attributes.title.en,
                imageUri: `https://uploads.mangadex.org/covers/${manga.id}/${mangaFileName}`,
                description: manga.attributes.description.en
              };
            });
            const fetchedManga: any = await Promise.all(mangaPromises);
            setResultArr(fetchedManga);
            setAutoplay(true);
          } catch (error: any) {
            console.error('Errore durante la richiesta API:', error);
          }
        };
        fetchData();
      }, []);
    
    
      return (
    
        <Swiper dotColor="false" activeDotColor="false" autoplay >
          {resultArr.map((manga, index) => (
            <View key={index} style={{ flex: 1, }}>
              <ImageBackground
                source={{ uri: manga.imageUri }}
                style={{ flex: 2, height: 500 }}
                imageStyle={{ opacity: 0.6 }}
              >
                <View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.7)', paddingLeft: 3 }}>
                  <View onLayout={onLayout} style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingTop: 18 }}>
                    <View style={{ flex: 0.4 }}>
                      <Card elevation={0} style={{ width: '80%', paddingBottom: 17 }}>
                        <Card.Cover source={{ uri: manga.imageUri }} />
                      </Card>
                    </View>
                    <View style={{ flex: 0.6, marginLeft: 10, justifyContent: 'center' }}>
                      <Text style={{ fontSize: 18, fontWeight: 'bold', color: 'white' }}>{manga.title}</Text>
                      <Text numberOfLines={3} style={{ fontSize: 14, color: 'white' }}>{manga.description}</Text>
                    </View>
                  </View>
                </View>
              </ImageBackground>
            </View>
          ))}
        </Swiper>
      );
    }
    
    export default HomeCarousel;  

Hi can you try to set key for swiper component ? here is the example

<Swiper key={`swiper-${resultArr?.length}`} dotColor="false" activeDotColor="false" autoplay={true} >  
   //Your components
</Swiper>