Как использовать scroll-snap-type?

У меня есть стили в моем приложении.

 .page {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    transition: all .5s;
    background-color: #f4f4f4;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
}

.section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    min-width: 100vw;
    min-height: 100vh;

    position: relative;
    

    background-color: #B6D7F2;
    padding-right: 20vw;
    padding-left: 5vw;
    align-items: center;
    scroll-snap-align: start;
}


.card__section{
    background-color: #f4f4f4;
    position: relative;
    min-width: 50%;
    min-height: abs(50vh);
    display: flex;
    flex-direction: column;
    margin-bottom: 25vh;
    scroll-snap-align: start;
}

.video-section{
    min-width: 100vw;
    min-height: 100vh;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    scroll-snap-align: start;
}

Структура примерно такая:

export default function Home() {

    const toTopBtnRef = useRef(null)

    const [scroll, setScroll] = useState(0);
    useEffect(() => {
        window.addEventListener("scroll", handleScroll);
        console.log(window.innerHeight);
        return () => window.removeEventListener("scroll", handleScroll);


    }, []);
    const handleScroll = () => {
        setScroll(window.scrollY);
        let windowScrolls = window.scrollY;
        if (windowScrolls > 0) toTopBtnRef.current.classList.add("totopbtn--active")
        else toTopBtnRef.current.classList.remove("totopbtn--active")
    };



    return (

<div className="page">
<button clussName ="totopbtn" ref=toTopBtnRef>
<Section className="section">many_of_content </Section>
<Section className="section">many_of_content </Section>
<Section className="card__section">many_of_content </Section>
<Section className="video-section">many_of_content </Section>
<Footer classname="section footer">Footer content</Footer>
</div> 
)
}

Почему у меня не работает full page scroll? Проверяю в последней версии google chrome

Влияет ли как-то на его поведение отслеживание скролла окна Реактом?