How to fix scrollable function that jump from the first item to the last in react-elastic-carousel?

Question

I have an application that shows images using react-elastic-carousel, but the problem is that what I have done it's not what I was expected. The scroll function is not working properly, when I scroll insted of scrolling from the first item to the second, it jumps from the first to the last item. Can anyone tells me what I am missing in the function? Thanks a lot. I want reproduce something similar like in this link: https://codepen.io/Grawl/pen/mMLQQb

Here is what I tried to achieve but did not work yet:

App:

    import React, { useState, useEffect, useRef } from "react";
    import Carousel from "react-elastic-carousel";
    import "./styles.css"
    
        const App=()=>{
    
    const slider = useRef(null);
    
       const slider = useRef(null);

  function scroll(e) {
    if (slider === null) return 0;

    e.wheelDelta > 0
      ? slider.current.onNextStart()
      : slider.current.onPrevStart();
  }

  useEffect(() => {
    window.addEventListener("wheel", scroll, true);

    return () => {
      window.removeEventListener("wheel", scroll, true);
    };
  }, []);
        
        return(
           <Carousel
          onScroll={scroll}
          verticalMode
          itemsToShow={1}
          enableSwipe={true}
          ref={slider}
        >
                <div className="image">
               <img src="https://i.picsum.photos/id/423/200/300.jpg?hmac=Yb4FKqDYd2C1Lvx5F0BDwATeS4vxsllU9vPl228-BXQ" height="100px" width="100px" alt="img" />
             </div>
        <div className="image">
               <img src="https://i.picsum.photos/id/423/200/300.jpg?hmac=Yb4FKqDYd2C1Lvx5F0BDwATeS4vxsllU9vPl228-BXQ" height="100px" width="100px" alt="img" />
             </div>
              <div className="image">
               <img src="https://i.picsum.photos/id/423/200/300.jpg?hmac=Yb4FKqDYd2C1Lvx5F0BDwATeS4vxsllU9vPl228-BXQ" height="100px" width="100px" alt="img" />
             </div>
        <div className="image">
               <img src="https://i.picsum.photos/id/423/200/300.jpg?hmac=Yb4FKqDYd2C1Lvx5F0BDwATeS4vxsllU9vPl228-BXQ" height="100px" width="100px" alt="img" />
             </div>
            </Carousel>
        )
        }

styles.css

.rec .rec-pagination {
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  margin: -17rem 17rem 0 0;
}
.rec .rec-item-wrapper {
  display: flex;
  justify-content: space-evenly;
}
.rec .rec-dot {
  position: relative;
  background-color: var(--btn-scroll-color);
  border: none;
}
.rec .rec-arrow-down,
.rec .rec-arrow-up {
  visibility: hidden;
}
.rec .rec-dot_active {
  background-color: var(--primary-color);
  border: none;
}
.rec .rec-arrow-down,
.rec .rec-arrow-up {
  visibility: hidden;
}
.rec .rec-dot {
  position: relative;
  background-color: var(--btn-scroll-color);
  outline: none;
  transition: all 0.3s ease;
}
.rec .rec-dot_active {
  background-color: var(--primary-color);
  outline: none;
  transition: all 0.3s ease;
}