Swiper React lib replace blank slides to first in list

Question

I'm using swiper and try to do next: I need to create Slider with Swipe with 7 slides splitted to 3 slides per view, when user reach to the last group of 3 - currently it contains my last 7th slide and 2 blank slides.

I want to replace that 2 blank slides to my first 2 items in list. Current state: Group 1: 1st -- 2nd -- 3rd slides Group 2: 4th- 5th - 6th Group 3: 7th - 8blank - 9blank

Desired state: Group 1: 1st -- 2nd -- 3rd slides Group 2: 4th- 5th - 6th Group 3: 7th - 1st - 2nd

Afte that, when user click next navigation or click on first group dot, it should scroll to first item ( to the left in this case)

Any suggestions?

My current code is next. I tried to remove either make width of blank slides to 0, but than whole slider brokes as slides disordered.

<Swiper
        slidesPerView={3.2}
        slidesPerGroup={3}
        spaceBetween={10}
        navigation
        pagination={{
            clickable: true,
        }}
        modules={[Pagination, Virtual, Navigation]}
        className="mySwiper"
        loop
        lazyPreloadPrevNext={6}
        loopAddBlankSlides
        rewind
    >
        <SideButton />
        <SwiperSlide virtualIndex={1}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://sketch-cdn.imgix.net/assets/blog/what-is-a-mockup-header%402x.png?ixlib=rb-4.1.0&fit=crop&dpr=2&w=1200&h=512&q=100&fm=jpg&auto=format&s=ab6b6be50b91ab268c23e93b87b01099"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={2}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://img.freepik.com/free-photo/blank-catalog-magazines-book-mock-up-blue-background_1232-4969.jpg"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={3}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://www.thespruce.com/thmb/tQTXXAawXujxURFWEQ0JqzpF_nQ=/4288x0/filters:no_upscale():max_bytes(150000):strip_icc()/mock-orange-shrubs-2132723_02-1a827066a4e44cd684cbc9d0c4477f3e.jpg"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={4}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://nordicapis.com/wp-content/uploads/10-Tools-To-Mock-HTTP-Requests-1.jpg"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={5}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://elearningindustry.com/wp-content/uploads/2017/12/5-advantages-of-online-mock-tests-1.png"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={6}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2d5CNIOkRc7g2aS4zW2wS4NEP-8DaSWsQFg&usqp=CAU"
                    alt=""
                />
            </div>
        </SwiperSlide>
        <SwiperSlide virtualIndex={6}>
            <div style={{ width: '300px', height: '300px' }}>
                <img
                    src="https://img.freepik.com/free-psd/four-vertical-business-card-mock-up_1389-12.jpg"
                    alt=""
                />
            </div>
        </SwiperSlide>
    </Swiper>

Will appreciate any suggestion!