simple-grid | simple responsive flexbox grid | Grid library

I have a similar open question here on Cross Validated (though not implementation focused, which I intend this question to be, so I think they are both valid).

I'm working on a project that uses sensors to monitor a persons GPS location. The coordinates will then be converted to a simple-grid representation. What I want to try and do is after recording a users routes, train a neural network to predict the next coordinates, i.e. take the example below where a user repeats only two routes over time, Home->A and Home->B.

I want to train an RNN/LSTM with sequences of varying lengths e.g. (14,3), (13,3), (12,3), (11,3), (10,3), (9,3), (8,3), (7,3), (6,3), (5,3), (4,3), (3,3), (2,3), (1,3) and then also predict with sequences of varying lengths e.g. for this example route if I called

I'm trying to implement an infinite scrolling but I can't get document.body.scrollHeight or window.scrollY or window.pageYOffset to work in my app. I've tried it by inspecting wikipedia and other sites and it works fine, but for some reason it just doesn't work in my React app. Can anyone help?

Inspection - React - Fail

Inspection - Other apps e.g. Wikipedia - Works

App logging - React - Fail

I've since tried finding this scrollY property in other React applications but still nothing. Always logs 0 in a react app.

As you can see in the image, the scrollbar is clearly not at the top.