React Scroll snap with "react-use-scroll-snap"

Question

I need help. This is my current code:

export default function Home() {
  const mainRef = useRef(null);
  const snap = useScrollSnap({ ref: mainRef, duration: 100 });
  return (
    <main ref={mainRef}>
      <section className="panel">
        <Hero />
      </section>
      <section className="panel">
        <BenefitsMain />
      </section>
      <section className="panel">
        <HowItWorksMain />
      </section>
      <section className="panel">
        <ReviewsMain />
      </section>
      <section className="panel">
        <ExclusiveCommunity />
      </section>
      <section className="panel">
        <RealResult />
      </section>
      <section className="panel">
        <PackagesMain />
      </section>
      <section className="panel">
        <BlogMain />
      </section>
    </main>
  );
}

And this works fine, but there is catch, for example inside <BenefitsMain /> there are multiple new sections that scroll won't snap to. How to do also that, I tried adding same thing there but it won't work as expected. Please help.