How to restrict multi touch scroll event on swiper to just load the next slide content

Question

when user even tries to touch scroll on touch devices multiple times we just load the next slide i.e. even if the user scroll multi times we just count it one scroll event so that they go thru all slides progressively and dont skip reading content

import React, { useState } from 'react';
import { Swiper, SwiperSlide, Mousewheel, EffectFade } from 'swiper/react';
import 'swiper/swiper-bundle.css';

const YourComponent = () => {
  const [allowScroll, setAllowScroll] = useState(true);

  const params = {
    noSwiping: !allowScroll,
    noSwipingClass: 'swiper-no-swiping',
    threshold: 50, // Adjust the threshold as needed
    onSlideChange: (ev) => {
      onSlideChange(ev);
      setAllowScroll(false);
      setActiveIndex(ev.activeIndex);
      videoRef.current.currentTime = 0;
      videoRef.current.play();
    },
    onTouchEnd: () => {
      // Re-enable scrolling after the touch ends
      setAllowScroll(true);
    },
  };

  return (
    <Swiper
      {...params}
      direction="vertical"
      effect="fade"
      allowSlideNext={allowSlideNext}
      slidesPerView={1}
      spaceBetween={0}
      speed={1500}
      nested={true}
      mousewheel={true}
      pagination={{
        clickable: true,
      }}
      fadeEffect={{ crossFade: true }}
      modules={[Mousewheel, EffectFade]}
      className="mySwiperInner"
    >
      <SwiperSlide>{/* Your content for the first slide */}</SwiperSlide>
      <SwiperSlide>{/* Your content for the second slide */}</SwiperSlide>
      <SwiperSlide>{/* Your content for the third slide */}</SwiperSlide>
    </Swiper>
  );
};

export default YourComponent;