I'm trying to build the Lazy Loading feature with react-intersection-observer, the goal is to only load the images in the boxes if they're in the viewport.

• Currently, when I scroll to the last elements - it will render out all of the images of the boxes.
• But when I scroll up and the last boxes are out of the viewport, everything on top will disappear.
• If I print out inView, this turns to true when scrolling to the last elements and turns false when the last elements are out of the viewport.

How to fix this problem so it will only render out the boxes that are in the viewport?

Demo gif:

My code:

App.js

export const AppContext = createContext();

function App() {
  const { ref, inView, entry } = useInView({
    rootMargin: "50px 0px",
    initialInView: true
    // triggerOnce: true,
  });

  return (
    <AppContext.Provider value={{ ref, inView, entry }}>
      <div className="App">
        <Posts />
      </div>
    </AppContext.Provider>
  );
}

export default App;

Post.js

import { useContext } from 'react'
import { AppContext } from '../App'

function Post({ post }) {
  const { ref, inView } = useContext(AppContext)
  return (
    <div className="post" ref={ref}>
      {inView ? 
        <img src={post.imgUrl} alt={post.title} className="post__img" loading="lazy" />
        : <div className="post__img" />
      }
      <h1 className="post__title">{post.title}</h1>
    </div>
  )
}

export default Post

Update:

I updated the Codesandbox link below to move useInView to Post.js and removed the Context API. It works now!