How to get new transition animation for each new slide with swiper?

Question

I need to make for different slides different animations. I tried to dynamically substitute the value of the effect like this:

return (
 <Swiper
      autoplay={{
        delay: 12000,
        disableOnInteraction: false,
      }}
      className={`${styles.gallery_slide}`}
      spaceBetween={5}
      slidesPerView={1}
      loop={true}
      pagination={{ clickable: true }}
      navigation
      effect={effect}
      speed={1000}
      onSlideChange={() => nextEffect()}
    >
      {slides
    ?.filter((slide) => slide.isShown)
    .sort((a, b) => a.priority - b.priority)
    .map((slide) => (
      <SwiperSlide key={slide.href}>
        <Route
          href={isUrlIncludesHttpOrDot(slide.href) ? `${slide.href}` : `${apiUrl}/${slide.href}`}
        >
          <Image
            priority={true}
            alt={slide.text}
            src={`${apiUrl}/static/uploads/${isMobile ? slide.imageMobile : slide.image}`}
            width={1400}
            height={400}
          />
        </Route>
      </SwiperSlide>
    ))}
  </Swiper>
)

It worked, but there were a lot of bugs with animations, the animation broke. Then I tried another method, shown in the code below, but only one animation is always used. I can not figure out how to properly implement such an functionality with transition animations.

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, {
  Autoplay,
  Pagination,
  Navigation,
  EffectCoverflow,
  EffectCube,
  EffectFade,
  EffectFlip,
} from 'swiper';
import Image from 'next/image';
import { useMedia } from 'hooks/useMedia';

import styles from '../slide/slide-galerry.module.scss';
import UseSlider from '../../hooks/useSlider';
import apiUrl from '../../api/config';
import Route from '../route/Route';

SwiperCore.use([
  Autoplay,
  Pagination,
  Navigation,
  EffectCoverflow,
  EffectCube,
  EffectFade,
  EffectFlip,
]);

const SlideGallery = () => {
  const { slides } = UseSlider();
  const isMobile = useMedia(`(max-width: ${styles.sm}px)`);
  const isUrlIncludesHttpOrDot = (url: string): boolean => {
    return url.includes('http') || url.includes('.');
  };

  const slidesArr = slides
    ?.filter((slide) => slide.isShown)
    .sort((a, b) => a.priority - b.priority)
    .map((slide) => (
      <SwiperSlide key={slide.href}>
        <Route
          href={isUrlIncludesHttpOrDot(slide.href) ? `${slide.href}` : `${apiUrl}/${slide.href}`}
        >
          <Image
            priority={true}
            alt={slide.text}
            src={`${apiUrl}/static/uploads/${isMobile ? slide.imageMobile : slide.image}`}
            width={1400}
            height={400}
          />
        </Route>
      </SwiperSlide>
    ));

  const slide = (
    <Swiper
      autoplay={{
        delay: 12000,
        disableOnInteraction: false,
      }}
      className={`${styles.gallery_slide}`}
      spaceBetween={5}
      slidesPerView={1}
      loop={true}
      pagination={{ clickable: true }}
      navigation
      effect="slide"
      speed={1000}
      onSlideChange={() => nextEffect()}
    >
      {slidesArr}
    </Swiper>
  );

  const coverflow = (
    <Swiper
      autoplay={{
        delay: 12000,
        disableOnInteraction: false,
      }}
      className={`${styles.gallery_slide}`}
      spaceBetween={5}
      slidesPerView={1}
      loop={true}
      pagination={{ clickable: true }}
      navigation
      effect="coverflow"
      speed={1000}
      onSlideChange={() => nextEffect()}
    >
      {slidesArr}
    </Swiper>
  );

  const fade = (
    <Swiper
      autoplay={{
        delay: 12000,
        disableOnInteraction: false,
      }}
      className={`${styles.gallery_slide}`}
      spaceBetween={5}
      slidesPerView={1}
      loop={true}
      pagination={{ clickable: true }}
      navigation
      effect="fade"
      speed={1000}
      onSlideChange={() => nextEffect()}
    >
      {slidesArr}
    </Swiper>
  );

  const flip = (
    <Swiper
      autoplay={{
        delay: 12000,
        disableOnInteraction: false,
      }}
      className={`${styles.gallery_slide}`}
      spaceBetween={5}
      slidesPerView={1}
      loop={true}
      pagination={{ clickable: true }}
      navigation
      effect="flip"
      speed={1000}
      onSlideChange={() => nextEffect()}
    >
      {slidesArr}
    </Swiper>
  );

  const effectsArr: string[] = ['slide', 'coverflow', 'fade', 'flip'];
  const [count, setCount] = useState(0);
  const [effect, setEffect] = useState(effectsArr[count]);

  const updateCount = useCallback(() => {
    if (effectsArr.length - 1 === count) {
      setCount(0);
    } else {
      setCount(count + 1);
    }
  }, [count]);

  function nextEffect(): void {
    setEffect(effectsArr[count]);
    updateCount();
  }

  if (!slides || !slides.length) return null;

  if (effect === 'slide') {
    return slide;
  }

  if (effect === 'coverflow') {
    return coverflow;
  }

  if (effect === 'fade') {
    return fade;
  }

  if (effect === 'flip') {
    return flip;
  }
};

export default SlideGallery;