How to scroll to element useScroll framer motion

Question

The scroll is never stay on the top of the element, it always scroll or more pixels than need or less What's wrong? I tried react-observers, event listeners, etc. nothing helps PLEASE SOMEONE HELPPPP I cant find even some solution for this in whole internet, I could use just scroll snap, but it needs only to a few blocks, that have 100vh height and margin 20px between each other. Also their container has width: calc(1920px - 720px); margin: 0 auto; position: relative; so i can just use scroll snap

const FranchisePage = () => {
    const [currentSection, setCurrentSection] = useState(0)

    const sections = [
        useRef(null),
        useRef(null),
        useRef(null),
        useRef(null),
        useRef(null),
    ]

    const whyUsVisible = useInView(sections[0], {
        margin: "-20% 0px -80% 0px"
    })

    const propositionVisible = useInView(sections[1])

    const cyberSportVisible = useInView(sections[2])

    const infrastructureVisible = useInView(sections[3])

    const newFormatVisible = useInView(sections[4])

    useEffect(() => {
        if (!(whyUsVisible || propositionVisible || cyberSportVisible || infrastructureVisible || newFormatVisible)) {
            setCurrentSection(-1)
        }

        console.log(currentSection)

        if (whyUsVisible && currentSection !== 0) {
            console.log(sections[0].current.getBoundingClientRect())
            window.scrollTo({
                top: sections[0].current.getBoundingClientRect().top + window.scrollY,
                behavior: "smooth"
            })
            setTimeout(() => setCurrentSection(0), 200)
        } else if (propositionVisible && currentSection !== 1) {
            window.scrollTo({
                top: sections[1].current.getBoundingClientRect().top + window.scrollY,
                behavior: "smooth"
            })
            setTimeout(() => setCurrentSection(1), 200)
        } else if (cyberSportVisible && currentSection !== 2) {
            window.scrollTo({
                top: sections[2].current.getBoundingClientRect().top + window.scrollY,
                behavior: "smooth"
            })
            setTimeout(() => setCurrentSection(2), 200)
        } else if (infrastructureVisible && currentSection !== 3) {
            window.scrollTo({
                top: sections[3].current.getBoundingClientRect().top + window.scrollY,
                behavior: "smooth"
            })
            setTimeout(() => setCurrentSection(3), 200)
        } else if (newFormatVisible && currentSection !== 4) {
            console.log(sections[4].current.getBoundingClientRect().top + window.scrollY)
            window.scrollTo({
                top: sections[4].current.getBoundingClientRect().top + window.scrollY,
                behavior: "smooth"
            })
            setTimeout(() => setCurrentSection(4), 200)
        }
    }, [whyUsVisible, propositionVisible, cyberSportVisible, infrastructureVisible, newFormatVisible]);

    return (
        <div className="franchise">
            <Container>
                <FranchiseCover/>
                <VideoCarousel/>
                <Philosophy/>
                <WhyUs ref={sections[0]}/>
                <Proposition ref={sections[1]}/>
                <CyberSport ref={sections[2]}/>
                <Infrastructure ref={sections[3]}/>
                <NewFormat ref={sections[4]}/>
                <YellowSection/>
                <OurExperience/>
            </Container>
        </div>
    );
};

export default FranchisePage;

I spent so many attempts and hours on this.