import React, { Fragment } from "react";

import { Swiper, SwiperSlide } from "swiper/react";

import SwiperCore, { EffectCoverflow, Navigation } from "swiper";

import "swiper/swiper-bundle.css";

import "./App.css";

import Party2 from "./Party2.png";



SwiperCore.use([EffectCoverflow, Navigation]);



const slides = [];

for (let i = 0; i < 10; i += 1) {

  slides.push(

    <SwiperSlide key={`slide-${i}`}>

      <img

        className="review-slider-image"

        src={Party2}

        style={{ listStyle: "none" }}

        alt={`Slide ${i}`}

      />

    </SwiperSlide>

  );

}



const App = () => {

  return (

    <Fragment>

      <Swiper

        slidesPerView="3" // or 'auto'

        slidesPerColumn="2"

        slidesPerGroup="3"

        spaceBetween="5"

        grabCursor={true}

        autoplay={{ delay: 3000 }}

        navigation

      >

        {slides}

      </Swiper>

    </Fragment>

  );

};



export default App;

CSS code

body {

  background: #eee;

  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

  font-size: 14px;

  color: #000;

  margin: 0;

  padding: 0;

}



.swiper-container {

  width: 100%;

  height: 100%;

  margin-left: auto;

  margin-right: auto;

}



.swiper-slide {

  width: 300px;

  height: 300px;

}



.swiper-slide img {

  width: 100%;

}

I want to create multi row slider from swiper.js in react. I am not able to achieve that with what they have provided in the documentation. Here is the github repo of what I want to create from swiper.js
https://github.com/nolimits4web/Swiper/blob/master/demos/170-slides-per-column.html
How do I solve this issue