Отзывчивость Swiper.js не работает с точками останова

Я попробовал этот очень простой пример Swiper, чтобы проверить отзывчивость с помощью библиотеки Swiper, но проблема в том, что когда я изменяю размер экрана, я не получаю slidesPerView, как указано в контрольных точках (это постоянно один slidePerView).

Вот код:

import React from 'react'
import {Swiper , SwiperSlide} from 'swiper/react'
import 'swiper/css'

const SwiperCard =()=>{
return(
        <Swiper

            breakPoints = {{
            0: {slidesPerView: 1},
            480: {slidesPerView: 2,
                   spaceBetween: 16},
            768: {slidesPerView: 4,
                   spaceBetween: 16},
            1024:{slidesPerView: 8,
                   spaceBetween: 16}
            }}
        >
        <SwiperSlide>
            <div style = {{backgroundColor: 'red'}}>slide1</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style = {{backgroundColor: 'red'}}>slide2</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style = {{backgroundColor: 'red'}}>slide3</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style = {{backgroundColor: 'red'}}>slide4</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style = {{backgroundColor: 'red'}}>slide5</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style = {{backgroundColor: 'red'}}>slide6</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style = {{backgroundColor: 'red'}}>slide7</div>
        </SwiperSlide>
        <SwiperSlide>
            <div style = {{backgroundColor: 'red'}}>slide8</div>
        </SwiperSlide>
        </Swiper>


)
}
export default SwiperCard

App.js

import './App.css';
import SwiperCard from './component/SwiperCard'
function App() {
  return (
    <div className = "App">

        <SwiperCard />
    </div>
  );
}

export default App;

Я хочу получить ответ, потому что хочу включить его в свой проект реагирования.