react-id-swiper: Using scrollbar to switch slides doesn't work without CssMode enabled, won't detect scroll

Question

I am trying to make a swiper that is 100vh tall. So basically, when the user is scrolling down the page, when the full slide is in their vision, the swiper begins and when the user scrolls up/down, they can go up and down slides. For e.g, scrolling down on Slide 1 will go to Slide 2. Scrolling up from Slide 4, will go to Slide 3.

However, when using the API and enabling the mousewheel to scroll through slides, it will not detect scroll. Mouse dragging still works to change slide, mousewheel does absolutely nothing.

However, when I enable cssmode as a property for the settings, it works fine (although, I cannot use this as it limits some functionality that I need). Can somebody help me figure out what is the issue?

Note: I am also using next.js for this project.

My code:

React/Next:

import Swiper from "react-id-swiper";
import "swiper/swiper-bundle.css";
const FullScreenSwiper = ({ componentData }) => {
  const settings = {
    direction: "vertical",
    slidesPerView: 1,
    spaceBetween: 30,
    mousewheel: true,
    cssMode: true, // with this enabled, it works fine. Disabled, it does not
    on: {
      scroll: function () {
        console.log("swiper scrolled");
      },
    },
  };

  return (
      <div class="swiper mySwiper">
        <Swiper {...settings}>
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
        </Swiper>
      </div>
  );
};

export default FullScreenSwiper;

SCSS:

.swiper-container {
  height: 100%;
}

body,
html {
  height: 100%;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide {
  width: 100%;
  height: 600px;
  position: relative;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

  &:nth-child(1) {
    background: #d8e2dc;
  }
  &:nth-child(2) {
    background: #ffe5d9;
  }
  &:nth-child(3) {
    background: #ffcad4;
  }
  &:nth-child(4) {
    background: #f4acb7;
  }
}