React Swiper.js slide won't change when updating state with onSlideChange method

Question

I set swiper.js to navigate through different questions using ReactJS. I'm trying to change the {quesNumber} state with swiper's onSlideChange method, which should set the "q" URL parameter based on the current question's number ("q-{quesNumber}"). I've managed to so, but it is stuck on the first slide and not changes to the next one. I'm receiving this error on the console:

Uncaught TypeError: Cannot read property 'removeClass' of undefined
    at Swiper.updateSlidesClasses (swiper.esm.js:753)
    at Swiper.slideTo (swiper.esm.js:1311)
    at Swiper.slideNext (swiper.esm.js:1383)
    at Swiper.onNextClick (navigation.js:45)
    at HTMLDivElement.handleEvent (dom7.esm.js:517)

 - Here is my code:

    



    import React, { useContext } from "react";
    import { useHistory } from "react-router-dom";

    // Import Swiper React components
    import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
    import { Swiper, SwiperSlide } from "swiper/react";
    import { Context } from "../Context";

    // Import Swiper styles
    import "swiper/swiper.scss";
    import "swiper/components/navigation/navigation.scss";
    import "swiper/components/pagination/pagination.scss";
    import "swiper/components/scrollbar/scrollbar.scss";

    function Carousel() {
      let { quesNumber, setQuestNumber } = useContext(Context);

      let history = useHistory();

      function nextQuestion() {
        setQuestNumber(quesNumber + 1);
        history.push(`/q-${quesNumber + 1}`);
      }

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

      
      return (
        <Swiper
          loop={false}
          slidesPerView={"auto"}
          navigation
          spaceBetween={0}
          freeMode={true}
          pagination={{ clickable: false }}
          // onSwiper={() => (setQuestNumber(quesNumber ++))}
          onSlideChange={() => nextQuestion()}
          // onClick={() => console.log(nextQuestion())}
        >
          <SwiperSlide>slide 1</SwiperSlide>
          <SwiperSlide>slide 2</SwiperSlide>
          <SwiperSlide>slide 3</SwiperSlide>
          <SwiperSlide>slide 4</SwiperSlide>
        </Swiper>
      );
    }

    export default Carousel;




import React, { useContext } from "react";
import { useHistory } from "react-router-dom";

// Import Swiper React components
import SwiperCore, { Navigation, Pagination, A11y } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { Context } from "../Context";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";

function Carousel() {
  let { quesNumber, setQuestNumber } = useContext(Context);

  let history = useHistory();

  function nextQuestion() {
    setQuestNumber(quesNumber + 1);
    history.push(`/q-${quesNumber + 1}`);
  }

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

  
  return (
    <Swiper
      loop={false}
      slidesPerView={"auto"}
      navigation
      spaceBetween={0}
      freeMode={true}
      pagination={{ clickable: false }}
      // onSwiper={() => (setQuestNumber(quesNumber ++))}
      onSlideChange={() => nextQuestion()}
      // onClick={() => console.log(nextQuestion())}
    >
      <SwiperSlide>slide 1</SwiperSlide>
      <SwiperSlide>slide 2</SwiperSlide>
      <SwiperSlide>slide 3</SwiperSlide>
      <SwiperSlide>slide 4</SwiperSlide>
    </Swiper>
  );
}

export default Carousel;

Thanks :)