Cannot get slides per column to work

[ghost]

No matter what I do, I cannot get slides per column to work. It just looks like the attached image. I am using React with react bootstrap. Is there something obvious I am doing wrong?

import "swiper/swiper.min.css";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, Autoplay, Pagination } from "swiper/core";

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

const GalleryPage = () => {
  return (
      <>
      <section>
          <Swiper
            slidesPerView={3}
            slidesPerColumn={2}
            spaceBetween={30}
            pagination={{
              clickable: true,
            }}
            className="mySwiper"
          >
            <SwiperSlide>Slide 1</SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>
            <SwiperSlide>Slide 5</SwiperSlide>
            <SwiperSlide>Slide 6</SwiperSlide>
            <SwiperSlide>Slide 7</SwiperSlide>
            <SwiperSlide>Slide 8</SwiperSlide>
            <SwiperSlide>Slide 9</SwiperSlide>
          </Swiper>
      </section>
    </>
  );
};

export default GalleryPage;

CSS

.swiper-container {

  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: calc((100% - 30px) / 2);

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

[nolimits4web]

Look at the demo for reference https://codesandbox.io/s/stnkn?file=/src/styles.css

For me it seems in your example (according to screenshot) there is something wrong with Swiper height