multiple Swiper Thumb carousel navigation does not work

I am very new in React. I have multiple Swiper Thumb caroucels in one page. also I have two filtered elements in my code which I want to show on display.my first carousel works perfectly in at first filtered item, but second one's navigation does not work, when I click, nothing happens.

 const [thumbsSwiper, setThumbsSwiper] = useState(null);
 const [thumbsSwiper1, setThumbsSwiper1] =useState(null) 

                           this one works perfectly

                           <Swiper
                              style={{
                               "--swiper-navigation-color": "#fff",
                               "--swiper-pagination-color": "#fff",
                             }}
                             spaceBetween={10}
                             navigation={false}
                             thumbs={{ swiper: thumbsSwiper }}
                             modules={[FreeMode, Navigation, Thumbs]}
                             className="mySwiper2"
                           >
                               {movie.images.map((item,index)=>{
                                 return (
                                   <SwiperSlide key={index} >
                                   <img src={`http://.../${item}`} />
                                   </SwiperSlide>
                                 )
                               })}
                           </Swiper>
                           <Swiper
                               onSwiper={setThumbsSwiper}
                               spaceBetween={10}
                               slidesPerView={movie.images.length}
                               freeMode={true}
                               simulateTouch =  {true}
                               watchSlidesProgress={true}
                               modules={[FreeMode, Navigation, Thumbs]}
                               className="mySwiper"
                             >
                              {movie.images.map((item,index)=>{
                                 return (
                                   <SwiperSlide key={index}  >
                                   <img  src={`http://.../${item}`} />
                                   </SwiperSlide>
                                 )
                               })}
                             </Swiper>

this one does not work, it is multiple array inside it and maybe this is a reason

   <Swiper
    style={{
     "--swiper-navigation-color": "#fff",
    "--swiper-pagination-color": "#fff",
    }}
      spaceBetween={10}
      navigation={false}
        thumbs={{ swiper: thumbsSwiper1 }}
     modules={[FreeMode, Navigation, Thumbs]}
       className="mySwiper2"
          >
        {item.images.map((item,index)=>{
       return (
        <SwiperSlide key={index} >
          <img  src={`http://apicity.cgroup.ge/${item}`} />
        </SwiperSlide>
              )
           })}


     </Swiper>
         <Swiper
         onSwiper={setThumbsSwiper1}
          spaceBetween={10}
          slidesPerView={item.images.length}
         freeMode={true}
          watchSlidesProgress={true}
         modules={[FreeMode, Navigation, Thumbs]}
          className="mySwiper"
            >
          {item.images.map((item,index)=>{
            return (
            <SwiperSlide key={index}>
            <img  src={`http://apicity.cgroup.ge/${item}`}/>
            </SwiperSlide>
            )
          })}    
     </Swiper>

I thought I should change classes but it still does not worked, then I tried to change some property but still same result. help please

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum