Animation on scroll not working in mobile view in React JS

Question

I'm using aos library in react. it is working perfectly in desktop view. I initialized it correctly but when I'm trying the responsive mode, it is not working. I made a custom hook to use it easier. here is my code:

useAOS.js

import AOS from "aos";

import "aos/dist/aos.css";
const useAOS = () => {
  const settings = {
    duration: 1000,
    mirror: true,
    once: false,
  };
  return { AOS, settings };
};

export default useAOS;

the way I initialized it :

  const { AOS, settings } = useAOS();
  React.useEffect(() => {
    AOS.init({
      ...settings,
    });
  }, [AOS, settings]);

the element I want to animate, it is a Material UI v5 element but it is working fine in desktop view.

 <Typography
    variant="h6"
    fontWeight="bold"
    sx={{
      background: "linear-gradient(to right, #eecda3, #ef629f)",
      backgroundClip: "text",
      color: "transparent",
    }}
    component="div"
    data-aos="fade-left"
  >
    Lets Build Something Amazing with GPT-3 Open AI
  </Typography>