Swiper React Breakpoints on React Page Load (Bootstrap)

I'm using Swiper React with React.

As far as I'm aware, I'm not able to control the 'slides per view' with Bootstrap. If I could, I'd simply create the necessary columns and put the swiper slides inside them.

Instead I'm using the Swiper JS breakpoints. The breakpoints work and the 'slides per view' adjust as required, however, on page load, the slides show as 100%, and then shrink to the correct size - it's causing a horrible effect: VIDEO PREVIEW

If anybody has any idea how to fix this I'd appreciate it - Code below:

import { Link } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"

import { Container } from 'react-bootstrap';

import ProjectImage from "../images/project-image.jpg"

// import Swiper core and required modules
import { Pagination, A11y } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';

const IndexPage = () => (
  <Layout>
    <Seo title="Home" />
      <Container className="py-5">
      <Swiper
      modules={[Pagination, A11y]}
      spaceBetween={50}
      breakpoints={{
        0: {
          width: 0,
          slidesPerView: 1,
        },
        768: {
          width: 768,
          slidesPerView: 2,
        },
        1200: {
          width: 1200,
          slidesPerView: 3,
        },
      }}
      pagination={{ clickable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>
      <div class="card chosen-project">
                                <img src={ProjectImage} class="card-img-top" alt="..."/>
                                <div class="card-body">
                                    <h5 class="card-title mt-2">Lorem Ipsum</h5>
                                    <p class="card-text mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    <div class="mt-4 mb-2">
                                        <span class="badge rounded-pill">Lorem</span>
                                        <span class="badge rounded-pill">Ipsum</span>
                                    </div>
                                </div>
                                <div class="card-footer bg-white">
                                    <a href="#" class="card-link muted">Installer</a>
                                    <a href="#" class="card-link">Source</a>
                                </div>
                            </div>
      </SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
      <SwiperSlide>Slide 6</SwiperSlide>
      ...
    </Swiper>
      </Container>
  </Layout>
)

export default IndexPage