Optimal setting of triggers in React (similar to Google maps)

I am new to React and I have a question.

I have a conditionally infinite space in 4 directions implemented through a transform translate, like Google maps. I can also move in four directions. However, I have a question about how to implement a trigger to load new objects and simultaneously delete old objects in the React.

I made an implementation via observer, in the form of four divs in all directions. I didn’t really like this solution because of the constant excessive manipulation of the DOM tree, in the form of rebuilding divs after loading objects.

I also tried to make an implementation through a coordinate tracking transformer to calculate the moment of loading objects. But with this implementation, I will need to use setInterval. And that’s not cool (probably).

If you have any idea how it is implemented on Google maps?
Scheme