How to refresh AOS animations on a scroll-snap enabled main element with sections having scroll-snap-align?

Question

I am using AOS (Animate On Scroll) library to animate elements on my webpage as I scroll through them. However, I am facing an issue when using AOS on a main element that has scroll-snap enabled, and each section inside the main element has scroll-snap-align.

The issue is that because the scroll-snap main element has a height of 100vh, the main element does not have a scrollbar, and therefore AOS animations do not work.

Can anyone suggest how to AOS.refeshHard() to force AOS to re-calculate the animations on every section that I will reach? Can anyone suggest a solution to make AOS animations work on a scroll-snap enabled main element with scroll-snap sections?

Here is my code on which I am trying to add scroll snap with AOS animation

import React, { useEffect, useState } from "react";

import Loader from "./components/Loader"

function Home() {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 4300);
  }, []);

  return (
    <>
      {loading ? (
        <Loader />
      ) : (
        <>
          <main style={{ height: "100vh", scrollSnapType: "y mandatory", scrollBehavior: "smooth", overflowY: "scroll", overflowX: "hidden"}}>
           <section style={{scrollSnapAlign: "center"}}></section>
           <section style={{scrollSnapAlign: "center"}}></section>
           <section style={{scrollSnapAlign: "center"}}></section>
           <section style={{scrollSnapAlign: "center"}}></section>
           <section style={{scrollSnapAlign: "center"}}></section>
          </main>
        </>
      )}
    </>
  );
}

export default Home;