useInView not working even though the element is in the view

[LinThitHtwe]

Hello. I've been having a problem where I'm unable to animate because useInView() isn't working, and isHeadingInView is remaining false. The h1 element is clearly in view. This is my code:

const Page = () => {
  const headingRef = useRef(null);

  const isHeadingInView = useInView(headingRef, { once: true });

  const {
    data,
    isLoading,
  } = someFetchingFunction();

  if (isLoading) {
    return <Loading />;
  }

  return (
    <motion.h1
      ref={headingRef}
      initial={{ opacity: 0, x: 30 }}
      transition={{
        duration: 1,
      }}
      animate={isHeadingInView ? { opacity: 1, x: 0 } : {}}
    >
      {data?.title}
    </motion.h1>
  );
};