How can i force the re-rendering of the Swiper (initialSlide not working)

[TaniuOp]

Hi all!
Hopefully, you can help me with this .. I have searched everywhere on how to reload the Swiper and nothing...

I have an object with 2 sets of images selectedImages: { **normal_images** : ['10442513_0.jpg', '10442513_1.jpg', '10442513_10.jpg', '10442513_100.jpg'] , **colored_images**: ['10442513_0_colored.jpg', '10442513_1_colored.jpg', '10442513_10_colored.jpg', '10442513_100_colored.jpg'] } and this selectedImages object will change with a button in the parent component, replacing the previous images (from small images to big images).
The problem i'm having is that when i change the selectedImages state with the new images, the Swiper still uses the previous one. I can't find a way to reload the component with the new set. I have tried with initialSlide setting it to "0" but is ignoring it.

My component:

const ClassRoomImages = (allImages, modality) => {
    const [currentIndex, setCurrentIndex] = useState(0)
    const [selectedImages, setSelectedImages] = useState({
        normal_images: [],
        colored_images: [],
      })

      useEffect(() => {
        if (allImages.type === "small") {
          setCurrentIndex(0)
          setSelectedImages({
            normal_images: allImages.type.images,
            colored_images: allImages.type.images,
          })
        }
        if (allImages === "big") {
          setCurrentIndex(0)
          setSelectedImages({
            normal_images: allImages.type.images,
            colored_images: allImages.type.images,
          })
        }
      }, [allImages])

  return (
    <Swiper
      initialSlide={currentIndex}
      slidesPerView={1}
      lazyPreloaderClass={"swiper-lazy-preloader"}
  
    >
      {modality === "normal"
        ? selectedImages.normal_images.map((img_shown: string) => (
            <SwiperSlide key={img_shown}>
              <div
                className="swiper-zoom-container"
              >
                <img
                  src={`http://localhost:4000/images/${modality}/normal_images/${img_shown}` }
                  alt={img_shown}
                  loading="lazy"
                  className="swiper-lazy"
                />
           
              </div>
            </SwiperSlide>
          ))
        : selectedImages.colored_images.map((img_shown: string) => (
            <SwiperSlide key={img_shown}>
              <div
                className="swiper-zoom-container"
              >
                <img
                  src={`http://localhost:4000/images/${modality}/colored_images/${img_shown}` }
                  alt={img_shown}
                  loading="lazy"
                />
           
              </div>
            </SwiperSlide>
          ))}
    </Swiper>
  )
}

[tarunjain3]

Please try using default "key" prop. It worked for me!
ref url : https://stackoverflow.com/a/78723708/13713269