Scroll Getting Stuck When Changing Between The child components

import { useEffect, useState } from 'react';
import styles from './Styles.module.scss';
import Loader from '../../components/Loader/Loader';
import ScrolledBar from '../../components/ProgressBar/ProgressBar';
import MainSection from '../../components/MainSection/MainSection';
import MouseIcon from '../../components/MouseIcon/MouseIcon';

import { ReactIcon } from '../../components/svgs';
import { threshold } from 'three/webgpu';

const Home = () => {
  
  const [load, setLoad] = useState(true);
  const [snapScroll, setSnapScroll] = useState(false);
  const [blur, setBlur] = useState(false);

  const skills = [
    { skillName: 'React JS', skillImage: ReactIcon, skillLevel: 80, description: "" },
    { skillName: 'React Native', skillImage: ReactIcon, skillLevel: 70, description: "" },
    { skillName: 'Node JS', skillImage: ReactIcon, skillLevel: 60, description: "" },
    { skillName: 'Express JS', skillImage: ReactIcon, skillLevel: 60, description: "" },
    { skillName: 'Javascript', skillImage: ReactIcon, skillLevel: 89, description: "" },
    { skillName: 'Java', skillImage: ReactIcon, skillLevel: 56, description: "" },
    { skillName: 'Spring Boot', skillImage: ReactIcon, skillLevel: 70, description: "" },
    { skillName: 'Microserivces', skillImage: ReactIcon, skillLevel: 66, description: "" },
  ]

  useEffect(() => { 
    if(load) return;

    const snapSection = document.getElementById("SnapSection")!;

    const observer = new IntersectionObserver((entries) => {
      entries.map((entry) => {
        setSnapScroll(entry.intersectionRatio == 1);
        setBlur(entry.intersectionRatio > 0.1);
      });
    }, {threshold: [.1, 1]});

    observer.observe(snapSection);

    return () => observer.disconnect();
  }, [load]);

  useEffect(() => {
    if(load) {
      setTimeout(() => setLoad(false), 2000);
      return;
    }
    
    const maximumScrollLength = document.getElementsByTagName('main')[0].clientHeight;
    console.log(maximumScrollLength);

    const observer = new IntersectionObserver((entries) => {
      entries.map((entry) => {
        if(entry.isIntersecting) {
          entry.target.classList.add(styles.animateProgBar);
        } else {
          entry.target.classList.remove(styles.animateProgBar);
        }
      })
    })

    const progressBars = document.querySelectorAll(".progressBar");
    progressBars.forEach((a) => observer.observe(a));

  }, [load]);

  return load ? (<Loader />) : (
    <main className={`${styles.main}`}>
      <article>
        <MouseIcon />
        <ScrolledBar />
        <div className={`${styles.backEffect}`} ></div>
      </article>
      <article className='overscroll-auto'>
        <MainSection />
        <section id="SkillSection" className={`min-h-[100vh] flex flex-col gap-5 overscroll-auto justify-center items-center py-11 sticky top-0 transition-all ${blur && 'filter blur-sm' }`}>
          <div className='grid gap-3 w-[60%]'>
            { skills.sort((a, b) => b.skillLevel - a.skillLevel).map((a, i) => (
              <div className='flex flex-col gap-2' key={i}>
                <h1 className='font-iceberg text-3xl' >{a.skillName}</h1>
                <div className={`h-[10px] bg-yellow-300 rounded-lg relative`}>
                  <div className={`bg-red-500 h-[100%] overflow-visible rounded-lg flex justify-end items-center progressBar ${styles.progressBar}`} style={{ width: a.skillLevel+"%" }}>
                    <div className='w-6 aspect-square border p-1 rounded-lg' style={{ background: "var(--background-color)", borderColor: "var(--text-color)" }}>
                      {a.skillImage()}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </section> 
        <article id='SnapSection' className={`relative z-20 h-[100vh] overflow-hidden overscroll-auto  ${snapScroll && 'overflow-scroll snap-y snap-mandatory'}`}>
          <section className='p-10 w-[100%] h-[100vh] bg-red-400 snap-start'>Dev Garg</section>
          <section className='p-10 w-[100%] h-[100vh] bg-yellow-400 snap-start'>Dev Garg</section>
        </article>
            </article>
        </main>
    )
}

export default Home;

So I was Writing The Above Code in Which I have an Article which contains 3 different components MainSection, **SkillSection **and SnapSection. I wanted the main and SkillSection to scroll Normally then i wanted the Snap Section to appear and start Snaping the inner childs. I have somehow implemented the above said action but for some reason my scroll get stuck when shifting between the components i.e. SkillSection and SnapSection. I cant understand the reason. When snapSection is completly on the screen the scroll gets stuck and doesnt work until the mouse is moved.

For above feilds to not get Stuck i used various things like overscroll-behavious: auto. IntersectionObserver, etc but i can’t seem to make it work. The scroll works properly initially but after some time it start causing problem (Stuck) again. I am activating snap-scroll only when the snapSection is completely loaded. But till i move my mouse slightly it doesnt switch the scroll between child components.

Also, Please help if there is any other better method to implement this functionality.