How to make a swiper calendar with reactjs and swiperjs?

Question

JavaScript

Greetings! I'm trying to make a swiper in which such a concept:
1. 3 slides are visible - a piece of the left, a piece of the right and a whole central
one 2. the slides correspond to the dates, when loading the central one is today, the right one is tomorrow, etc. left - yesterday's

Infinity - in TK. Those. generating 1000 slides left and right is not an option, firstly in terms of technical specifications, and secondly, well, the collective farm. And wasteful in terms of data memory and the like.
It would be more logical as: I move to tomorrow - outside the user's visibility area, the day after tomorrow is created and deleted the day before yesterday.
It’s very logical, but I’d be bald :(

Let’s turn to examples from the official site - swiperjs.com > demos > virtual slides:
Core (VanillaJS) -https://codesandbox.io/s/pjzkg - click on the prepend / append buttons - slides are added and removed;
React version of the same demo - https://codesandbox.io/s/28spe - press the buttons and the active slide just changes! Gabella.

Am I stupid or is it stupid? how to implement in react what is in the first snippet? Here's how I try:

import SwiperCore, { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
import React, { useRef, useState } from 'react';
import 'swiper/swiper-bundle.css';
import "./styles.css";

function MainSlider(){
    const [swiperRef, setSwiperRef] = useState(null); //сюда как я понял суётся инстанс враппера сваппера
    const slides = [0,1,2,3];
     
    // активируется при смене слайдера, создаёт как будто поле для него а сам слайд не создаётся
   // похожее же поведение прослеживается в офиц реакт примере
   // ну не должно же оно так работать? нахрена мне вообще был тогда реакт)) как раз для spa
    const nc = () => {
        swiperRef.virtual.appendSlide("<div class=\"swiper-slide swiper-slide-visible\">Slide " + (swiperRef.virtual.slides.length) + "</div>")
    } 
    
    return (
        <div className='maincontainer'>
            <!-- суём собственно инстанс куда надо, и при смене слайда триггерится nc -->
            <Swiper onSwiper={setSwiperRef} modules={[Virtual]} onSlideChange={nc} className="mySwiper" virtual>
                {slides.map((SlideContent,index) => (
                    <SwiperSlide key={SlideContent} virtualIndex={index}>
                        ........
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    );
}


function App() {
    
  return (
    <MainSlider/>
  );
}

which I forgot to clarify - it is open and only glad. Thank you!

ps in the second official. snippet change the number of slides to 3 instead of a thousand and try to press append - that's the same for me