После рефреша Swiper меняет отображение

"use client";
import Link from "next/link";
import { IPrices } from "@/types/pricesType";
import { ImageMain } from "@/components/ui/image-main/ImageMain";
import { Swiper, SwiperSlide } from "swiper/react";
import { useEffect, useRef, useState } from "react";
import defaultImage from "../../../../public/images/fallback.jpg";
import styles from "./PriceSectionLinkList.module.css";
import { useParams } from "next/navigation";

type Props = {
  prices: IPrices[];
  section?: IPrices;
};

const PriceSectionLinkList = ({ prices, section }: Props) => {
  const swiperRef = useRef<any>(null);
  const param = useParams();
  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    if (!swiperRef.current) return;

    const swiperInstance = swiperRef.current.swiper;

    if (swiperInstance) {
      const fI = prices.findIndex(item => item.path === param.id);
      if (fI !== -1) {
        swiperInstance.slideTo(fI);
        setActiveIndex(fI);
      }
    }
  }, [param.id, prices])

  const goToSlide = (index: number) => {
    if (swiperRef.current?.swiper) {
      swiperRef.current.swiper.slideTo(index);
    }
  };

  return (
    <div className={styles.swiperWrapper}>
      <div className={styles.swiperContainer}>
        {
          <Swiper
            key={prices.length}
            ref={swiperRef}
            spaceBetween={10}
            slidesPerView={5}
            centeredSlides={true}
            direction="horizontal"
            onSlideChange={(swiper) => setActiveIndex(swiper.activeIndex)}
            className={styles.swiper}
            breakpoints={{
              1430: { slidesPerView: 5 },
              1200: { slidesPerView: 4 },
              900: { slidesPerView: 3 },
              670: { slidesPerView: 2 },
              550: { slidesPerView: 1.5 },
              491: { slidesPerView: 1.2 },
              0: { slidesPerView: 2.1, centeredSlides: true },
            }}
          >
            {prices.map(({ id, value, path }, index) => {
              const isActive = path === param.id;

              return (
                <SwiperSlide key={index}>
                  <Link key={id} href={`/price/${path}`} scroll={false} shallow>
                    <div
                      onClick={() => goToSlide(index)}
                      className={`${styles.SliderBlock} ${index % 2 ? styles.SliderBlockStart : styles.SliderBlockEnd
                        }`}
                    >
                      <article
                        className={`${styles.SCard} ${index % 2 !== 0 ? styles.SCardRightBottom : styles.SCardLeftTop
                          } ${isActive ? styles.ActiveCard : ""}`}
                      >
                        <ImageMain
                          src={defaultImage.src}
                          alt="Price category"
                          width="100%"
                          height="100%"
                          className={styles.img}
                          priority
                        />
                        <h3 className={`${styles.SH3} ${isActive ? styles.ActiveCard : ""}`}>
                          {value}
                        </h3>
                      </article>
                    </div>
                  </Link>
                </SwiperSlide>
              );
            })}
          </Swiper>
        }
      </div>
    </div>
  );
};

export { PriceSectionLinkList };

Не понимаю почему именно после перезагрузки все элементы слайдера становятся друг под другом.

Это до рефреша:

Это после рефреша: