How can i swipe top and down to change a slide when the div is rotate(90deg) thank you.

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, {
Navigation,
Pagination,
Autoplay,
Virtual
} from "swiper/core";
import "swiper/swiper-bundle.css";
import "./styles.css";

SwiperCore.use([Navigation , Pagination, Autoplay, Virtual]);

export default function App() {
const slides = [];

for (let i = 0; i < 12; i++) {
slides.push(
  <SwiperSlide key={`slide-${i}`} style={{ listStyle: "none" }}>
    <div className="slide">
      <h3>{i}</h3>
    </div>
  </SwiperSlide>
);
}

return (
<div style={{ transform: "rotate(90deg)" }}>
  <Swiper
    id="swiper"
    virtual
    slidesPerView={3}
    spaceBetween={30}
    onReachEnd={() => {
      console.log("reach end");
      const tmp = slides.unshift();
      slides.push(tmp);
    }}
    navigation
    pagination
  >
    {slides}
  </Swiper>
</div>
);
}

[enter link description here] [1]: https://codesandbox.io/s/swiper-react-demo-forked-kp24s?file=/src/App.js