I've been trying to create a web page with a window wheel event to make it work like (ref : https://www.laundrygo.com). As you may check on the ref website, if user scrolls down or up, the page very naturally moves.

To benchmark this, I used 'window.addEventListner("wheel", function), useState & UseEffect in React and boolean Flag'. However, it takes all the wheel events(4~10 times with a single scrolling...) within very short period of time. As a result of it, the page moves up & down two~four times(to the bottom or top) in a row, Which is not what i expect at all.... Even sometimes it moves to the opposite side.

I am adding up my code & screenshots below. Please review and give me some insights to solve this issue.

FYI:

1. I'm Using: React, JS.
2. I tried lodash debounce & throttle. None of them worked out.
3. It has totally 6 pages including splash & footer page.

    const [currentPage, setCurrentPage] = useState(1);
    const [isLoading, setIsLoading] = useState(false);

    const moveDown = () => {
        setCurrentPage(currentPage + 1);
        loadingController();
    };

    const moveUp = () => {
        setCurrentPage(currentPage - 1);
        loadingController();
    };

    const loadingController = () => {
        setTimeout(() => {
            setIsLoading(false);
        }, 1000);
    }

    const wheelEventCaller = () => {
        if (!isLoading) {
            setIsLoading(true);
            window.addEventListener("wheel", (e) => {
                e.preventDefault();
                if (e.deltaY > 500) {
                    if (currentPage >= 6) return;
                    moveDown();
                } else if (e.deltaY < 500) {
                    if (currentPage <= 1) return;
                    moveUp();
                }
            }, {passive: false});
        } else {
            return;
        }
    };

    useEffect(() => {
        wheelEventCaller();
    }, [isLoading, currentPage]);