How could i scroll to section to section in Next or React?

Question

I want similar functionality of scrolling section to section using window.addEventListener('scroll', function); in my nextjs app similar to https://www.elsner.com/ . Please look into this while i am using scroll it conitnously scrolling to sections to sections.

My Code:

const options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0,
};

const homeref = useRef(null);
const mainref = useRef(null);
const aboutref = useRef(null);
const servicesref = useRef(null);
const solutionsref = useRef(null);
const idoref = useRef(null);
const contactref = useRef(null);

const [mainactive, setmainactive] = useState('home');

const scrollto = (id) => {
    scroller.scrollTo(id, {
        duration: 1000,
        delay: 0,
        smooth: 'easeInOutQuart',
    });
};

const itemset = (id, scroll) => {
    setmainactive(id);
    scrollto(scroll);
    return;
};

const handleScroll = (direction) => {
    const sections = ['home', 'about', 'services', 'ido', 'solutions', 'contact'];
    const currentIndex = sections.indexOf(mainactive);
    let newIndex = currentIndex;

    if (direction === 'down') {
        if (mainactive === 'about') {
            const aboutBottom = aboutref.current.getBoundingClientRect().bottom;
            if (aboutBottom <= window.innerHeight) {
                newIndex = currentIndex < sections.length - 1 ? currentIndex + 1 : currentIndex;
            }
        } else {
            newIndex = currentIndex < sections.length - 1 ? currentIndex + 1 : currentIndex;
        }
    } else if (direction === 'up') {
        newIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
    }

    const nextSection = sections[newIndex];
    if (nextSection !== mainactive) {
        setmainactive(nextSection);
        scrollto(nextSection);
    }
};

useEffect(() => {
    const handleKeyDown = (event) => {

        const wheeldown = event.wheelDeltaY < 0 || event.deltaY > 0;
        const wheelup = event.wheelDeltaY > 0 || event.deltaY < 0;

        if (event.key === 'ArrowDown' || wheeldown || event.key === 'ArrowRight') {
            if ((mainactive === 'home' && window.scrollY > 0) || mainactive === 'about') {
                setmainactive('about');
                handleScroll('down');
            } else if (mainactive === 'about') {
                handleScroll('down');
            } else if (mainactive === 'services') {
                handleScroll('down');
            } else if (mainactive === 'ido') {
                handleScroll('down');
            }
        } else if (event.key === 'ArrowUp' || wheelup || 'ArrowLeft') {
            if (mainactive === 'services' || mainactive === 'ido' || mainactive == 'solutions') {
                handleScroll('up');
            } else if (mainactive === 'about') {
                setTimeout(() => {
                    setmainactive('home');
                }, 1000);
                scrollto('home');
            }
        }
    };

    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('wheel', handleKeyDown);
    window.addEventListener('touchmove', handleKeyDown, { passive: false });

    return () => {
        window.removeEventListener('keydown', handleKeyDown);
        window.removeEventListener('wheel', handleKeyDown);
    };
}, [mainactive]);

It is working fine on keys as same as i want using scroll.