multiple Swiper Thumb carousel navigation does not work

Question

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