Как сделать свайпер-календарь на reactjs и swiperjs?

Question

[vgodoo]

Приветствую! Пытаюсь сделать свайпер в котором такая концепция:
1. видны 3 слайда - кусочек левого, кусочек правого и целый центральный
2. слайды соответствуют датам, при загрузке центральный - сегодня, правый - завтрашний день и соотв. левый - вчерашний

Бесконечность - в тз. Т.е. нагенерить 1000 слайдов налево и направо - не вариант во первых по тз, а во вторых ну колхоз же. И расточительно с точки зрения памяти данных и тому подобного.
Логичнее было бы как: перемещаюсь на завтра - за областью видимости юзера создаётся послезавтра и удаляется позавчера.
Очень логично, да хрена мне бы лысого :(

Обратимся к примерам с офиц. сайта - swiperjs.com > demos > virtual slides:
Core (VanillaJS) - https://codesandbox.io/s/pjzkg - жмем на кнопки prepend/append - слайды добавляются и удаляются;
React версия той же демки - https://codesandbox.io/s/28spe - жмем кнопки и просто меняется активный слайд! Габелла.

Я дурак или оно дурак? как реализовать на реакте то, что в первом сниппете? Вот как пробую:

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/>
  );
}

чего забыл уточнить - открыт и только рад. Спасибо!

p.s. во втором офиц. сниппете меняем кол-во слайдов на 3 вместо тысячи и пробуем нажать append - вот тоже самое и у меня