I have a component which is rendered more than 1 time, I want to lazy load that component from the point it is out of viewport, which I think should be handled by intersection observer. Please help me in finding out what I am doing wrong in this.

I have used intersection observer to know if the component is coming in viewport or not and then checking if element is in viewport then display the component, otherwise display the loader. https://codesandbox.io/s/awesome-ganguly-cqj1zi?file=/src/lazyComponent.js