applying scroll-snap when scrolling each section

Question

i have an one-page website with 6 sections (Main, About, Portfolio, Process, Store and Contact). im trying to add scroll-snap so that it scrolls section by section.

import React, { useState, useEffect } from "react";
import MainPage from "./MainPage";
import About from "./About";
import Portfolio from "./Portfolio";
import Process from "./Process";
import Store from "./Store";
import Contact from "./Contact";

const FullpageLayout = () => {
  const [activeSection, setActiveSection] = useState("section1"); // Initialize with the default section

  // const scrollToSection = (sectionId) => {
  //   const sectionElement = document.getElementById(sectionId);
  //   if (sectionElement) {
  //     const yOffset =
  //       sectionElement.getBoundingClientRect().top + window.scrollY;
  //     window.scrollTo({ top: yOffset, behavior: "smooth" });
  //   }
  // };

  return (
    <div>
      <MainPage
        id="section1"
        setActiveSection={() => {
          setActiveSection("section1");
          // scrollToSection("section2");
        }}
      />
      <About
        id="section2"
        setActiveSection={() => {
          setActiveSection("section2");
          // scrollToSection("section3");
        }}
      />
      <Portfolio
        id="section3"
        setActiveSection={() => {
          setActiveSection("section3");
          // scrollToSection("section4");
        }}
      />
      <Process
        id="section4"
        setActiveSection={() => {
          setActiveSection("section4");
          // scrollToSection("section5");
        }}
      />
      <Store
        id="section5"
        setActiveSection={() => {
          setActiveSection("section5");
          // scrollToSection("section6");
        }}
      />
      <Contact
        id="section6"
        setActiveSection={() => {
          setActiveSection("section6");
          // scrollToSection("section1");
        }}
      />
    </div>
  );
};

export default FullpageLayout;

so what i've tried is,

const scrollSection = styled.div`
  scroll-snap-type: y mandatory;
  scroll-snap-align: start;
  height: 100vh;
  overflow-y: scroll;
`;

and wrapped All components with scrollSection. but what happens is, either it's not doing anything or working but only background is snapping and texts and some other contents are outside of the sections, which means kinda broke.

how should i apply properly?