React intersection observer does not work when responsive

Question

I'm using react-intersection-observer in order to make some animations when the component is in view.

It works cool, but, when i try to go to a mobile screen, like, 633px width and 400px height, it does not work, and i really don't know why.

Let me show you the code

So, what i'm doing here, is that, i want to know when the user is seeing 45% of the component, but, it gives false always, is it because this component is quite big, probably its height is 750px or even more and the height of the screen of the phone is only 400px ? i don't know... I'm just trying to understand why it doens't work

const DifferentWorks = () => {
  const [scrollY, setScrollY] = useState(0);

  const { inView, ref } = useInView({ threshold: 0.45 });

  useEffect(() => {
    scrollYProgress.onChange(n => setScrollY(n));
  }, [inView, scrollYProgress, scrollY]);

console.log(inView)

  return (
    <div ref={ref}>
      <DifferentWorksHero>
      </DifferentWorksHero>
    </div>
  );
};

export default DifferentWorks;

And let me show you what is the output of the console.log(inView)

I've scrolled all the component, from bottom to top, and this is the output

Always false..

What could be generating that error ? why it doesn't work when i change the size of the screen ?, specifally when the width is 663px and the height is under 500px