When the loop mode is on in Swiper, animations are not triggered in Gsap animation because they cannot be indexed. How can I do it?

Question

const Slider = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleSlideChange = (swiper) => {
    setActiveIndex(swiper.activeIndex);
  };

  return (
    <div className="slider-container">
      <Swiper
        spaceBetween={30}
        centeredSlides={true}
        autoplay={{
          delay: 4500,
          disableOnInteraction: false,
        }}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        loop={true}
        initialSlide={0}
        modules={[Autoplay, Pagination, Navigation]}
        onSlideChange={handleSlideChange}>
        {[
          <SlideOne isActive={activeIndex === 0} />,
          <SlideTwo isActive={activeIndex === 1} />,
          <SlideThree isActive={activeIndex === 2} />,
        ].map((Slide, index) => (
          <SwiperSlide key={index} className="swiper-slider">
            {Slide}
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default Slider;

I want the loop mode of the swiper to be on, but I cannot trigger the animations I made with gsap while the loop is on. I defined a state to specify the activeIndex, but it does not work because indexing is not done while the loop is on.