I'm trying to build infinite scroll pagination in React, and using JavaScript's IntersectionObserver to attach a load more div. Basically when the user scrolls down to the table then - Loading... text will come up and an API is being called to fetch the table contents from backend. The issue is If I show the Loading... text without any conditional rendering , then the IntersectionObserver is being properly triggered but when I add a condition to render the Loading... text then the IntersectionObserver is not being triggered at all.

From the backend API , I will be getting numberOfPages variable , which will define how many pages/ records present in db , in return Loading... text shouldn't come up after it reaches the last page. This is what I've tried so far. Also tried one of the blog i found out Blog Link.

Codesandbox code : Code link

Live : Live demo here