React Swiper Slider randomly scrolling

[Daleksander]

In my component i have a problem that when i dynamically insert SwiperSlides i have a problem that on scroll or on Click Slides are randomly moving . My slider is Vertival, freemode, looped with navigation buttons. If u have fixed amount {commented code in example} of SwiperSlides ,that are most likely without any keys, then all works ok. my code :

import React, { useRef, useEffect, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
import "swiper/css/navigation";

// import required modules
import { FreeMode, Pagination, Navigation } from "swiper/modules";

export default function HomePageSwiper() {
  const [prevEl, setPrevEl] = useState(null);
  const [nextEl, setNextEl] = useState(null);
  const swiperRef = useRef(null);
  const [pairedProducts, setpairedProducts] = useState([]);
  const [boolProducts, setBoolProducts] = useState(false);
  const products = [
    {
      number: 1,
      price: 22,
      currency: "EURO",
      img_name: "product_1",
      name: "tae",
      reservation: false,
      empty: false,
      id: 12,
    },
    {
      number: 2,
      price: 18,
      currency: "USD",
      img_name: "product_2",
      name: "Cdroll",
      reservation: false,
      empty: false,
      id: 13,
    },
    {
      number: 3,
      price: 15,
      currency: "GBP",
      img_name: "product_3",
      name: "roll",
      reservation: false,
      empty: false,
      id: 14,
    },
    {
      number: 4,
      price: 20,
      currency: "EUR",
      img_name: "product_4",
      name: "Dragon Roll",
      reservation: false,
      empty: false,
      id: 15,
    },
    {
      number: 5,
      price: 25,
      currency: "USD",
      img_name: "product_5",
      name: "Rainbow Roll",
      reservation: false,
      empty: false,
      id: 16,
    },
    {
      number: 6,
      price: 17,
      currency: "EUR",
      img_name: "product_6",
      name: "Philadelphia Roll",
      reservation: false,
      empty: false,
      id: 17,
    },
    {
      number: 7,
      price: 17,
      currency: "EUR",
      img_name: "product_7",
      name: "Philadelphia Boll",
      reservation: false,
      empty: false,
      id: 17,
    },
  ];

  useEffect(() => {
    setBoolProducts(true);
  }, []);

  useEffect(() => {
    if (boolProducts) {
      const tmpPairedProducts = [];
      let currentPair = [];

      // Sort the products based on the 'number' property
      products.sort((a, b) => a.number - b.number);

      for (const product of products) {
        currentPair.push(product);

        // Check if the current pair contains two elements or if it's the last element
        if (currentPair.length === 2 || product === products[products.length - 1]) {
          tmpPairedProducts.push(currentPair);
          currentPair = [];
        }
      }
      setpairedProducts(tmpPairedProducts);
      if (swiperRef.current) {
        swiperRef.current.update();
      }
    }
  }, [boolProducts]);

  return (
    // use the `useState` hook instead of `useRef`

    <div className="swiper-container">
      <Swiper
        navigation={{ prevEl, nextEl }}
        direction={"vertical"}
        modules={[FreeMode, Navigation]}
        slidesPerView={3}
        spaceBetween={30}
        freeMode={true}
        loop={true}
        pagination={{
          clickable: true,
        }}
        className="mySwiper"
        onSwiper={(swiper) => (swiperRef.current = swiper)}
      >
        {/* <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">
              <div className="image-container">
                <img src="src/assets/images/product.webp" alt="product" />
                <div className="image-overlay">
                  <div className="image-number">1</div>
                </div>
              </div>
              <div className="product-info">
                <div className="product-name">Sake Fukomaki 6(szt)</div>
                <div className="product-price">120 EURO</div>
              </div>
            </div>
            <div className="swiper-row-element">2</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">3</div>
            <div className="swiper-row-element">4</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">5</div>
            <div className="swiper-row-element">6</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">1</div>
            <div className="swiper-row-element">2</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">3</div>
            <div className="swiper-row-element">4</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">5</div>
            <div className="swiper-row-element">6</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">1</div>
            <div className="swiper-row-element">2</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">3</div>
            <div className="swiper-row-element">4</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">5</div>
            <div className="swiper-row-element">6</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">1</div>
            <div className="swiper-row-element">2</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">3</div>
            <div className="swiper-row-element">4</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">5</div>
            <div className="swiper-row-element">6</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">1</div>
            <div className="swiper-row-element">2</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">3</div>
            <div className="swiper-row-element">4</div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="swiper-row">
            <div className="swiper-row-element">5</div>
            <div className="swiper-row-element">6</div>
          </div>
        </SwiperSlide> */}
        {pairedProducts.map((product, index) => (
          <SwiperSlide key={product[0].id}>
            <div className="swiper-row">
              <div className="swiper-row-element">
                <div className="image-container">
                  <img src={`src/assets/images/product.webp`} alt={product[0].name} />
                  <div className="image-overlay">
                    <div className="image-number">{product[0].number}</div>
                  </div>
                </div>
                <div className="product-info">
                  <div className="product-name">{product[0].name}</div>
                  <div className="product-price">
                    {product[0].price} {product[0].currency}
                  </div>
                </div>
              </div>
              <div className="swiper-row-element">
                <div className="image-container">
                  <img src={`src/assets/images/product.webp`} alt={123} />
                  <div className="image-overlay">
                    <div className="image-number">{123}</div>
                  </div>
                </div>
                <div className="product-info">
                  <div className="product-name">{123}</div>
                  <div className="product-price">123</div>
                </div>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
      <div onClick={() => swiperRef.current.slidePrev()} className="my-btn btn-up btn-grey btn-swiper-up swiper-button-next">
      {/* <div ref={(node) => setPrevEl(node)} className="my-btn btn-up btn-grey btn-swiper-up swiper-button-next"> */}
        <span>➜</span>
      </div>
      <div onClick={() => swiperRef.current.slideNext()} className="my-btn btn-down btn-grey btn-swiper-down swiper-button-prev">
      {/* <div ref={(node) => setNextEl(node)} className="my-btn btn-down btn-grey btn-swiper-down swiper-button-prev"> */}
        ➜
      </div>
    </div>
  );
}

```
`
Below video example :
[Screencast from 05.09.2023 12:52:07.webm](https://github.com/nolimits4web/swiper/assets/101924135/83be3c13-c43f-4060-a53c-2bb60b0b84cc)
My sandbox link : https://codesandbox.io/p/sandbox/swiper-react-navigation-forked-dcmwnh?file=/src/App.jsx:274,22