How to load items using react-window-infinite-loader with react-window FixedSizeGrid

Question

I'm attempting to use react-window-infinite-loader with a FixedSizeGrid from react-window.

Before I start, I created a codesandbox with a minimal example which I'll reference in the question.

The issues I'm having are:

1. The grid doesn't seem to load all of the items in view. This is seen on initial load where the bottom two items on the first page are still in the loading state. This is strange because according to the docs, the infinite loader will load rows up until the threshold, which is 15 by default.

2. When scrolling, items near the end of the grid are not loaded in. In the example this can be seen by scrolling to the bottom and the seeing a batch of items in the loading state.

   I think that my issues are due to using the infinite loader with a grid but following the example of the list. I think that part of the issue is the isItemLoaded function because the index I get from that doesn't seem to correspond with the index of the item, but I think it's the row?

   In the end I'm not sure how to resolve these as the documentation I've seen has the infinite loader being used with a list component instead of a grid component.