[gatsby-plugin-image] lazy loading stops working when using react-intersection-observer

[Jwrighty]

I am trying to upgrade to the new gatsby-plugin-image and while investigating the performance impact i noticed that images below the fold were not being lazy loaded.

I am using react-intersection-observer to animate the parent container of the images as it comes in view and it appears that whenever you pass the ref from useInView it is conflicting somehow with the gatsby image plugin. Even when passing the ref to a div that is a sibling of the image.

I've created a basic reproduction here: https://codesandbox.io/s/bold-perlman-mhthy?file=/src/pages/index.js

Any idea how to make use of intersection observer for animation purposes without breaking lazy loading. This wasn't an issue with gatsby-image

[Jwrighty]

If anyone stumbles across the same issue - I was able to address this by moving away from react-intersection observer and creating my own observer hook which doesn't cause the same issues