Infinite Scroll is blocked by containing div with set height and overflow-y: scroll

[flynnpc-swca]

Hello. Has anyone run across the issue where the infinite scroll component fails to execute fetch if it is inside a div with a set height and set to scroll? Everything works fine until the RowsPhotoAlbum component and other divs reach about 12000px in height (32in monitor). it then fails to respond with intersect=true. Is there any chance the InfiniteScroll component could let you set the root element for the observer? I believe that may be the problem. As the inside divs height exceed that of the viewport (default root) then intersect=false. I would appreciate any help. Below is a basic set up for what I have. This is part of a larger application so there may be other interactions.

.galleryGridContainer {
    height: calc(100vh - 190px);
    width: 100vw;
}

.galleryGrid {
    height: 100%;
    margin-top: 10px;
    overflow-y: scroll;
    width: 100vw;
}

.photoTabs {
    color: #efefef !important;
    width: 100vw;
}
<div class=gallerGridContainer>
    <div class=galleryGrid>
        <InfiniteScroll
            fetch={async (index) =>
              fetchPhotos({ index, layer, layerFeatures })
            }
            photos={galleryPhotos}
            onClick={({ index }) => setIndex(index)}
            fetchRootMargin={'0px'}
            offscreenRootMargin={"0px"}
          >
            <RowsPhotoAlbum
              photos={[]}
              componentsProps={{
                container: { style: { backgroundColor: `#${azureShadow}` } },
              }}
              render={{
                container: ({ ref, ...rest }) => <div ref={ref} {...rest} />,
              }} 
           />
       </InfiniteScroll>
          <Lightbox
                slides={fetchedPhotos.map((photo: any) => {
                  return {
                    src: photo.src.slice(0, photo.src.indexOf("&w=250") + 1),
                    title: photo.name,
                  };
                })}
                open={index >= 0}
                index={index}
                close={() => setIndex(-1)}
                // enable optional lightbox plugins
                plugins={[Fullscreen, Slideshow, Thumbnails, Zoom, Captions]}
          />
    </div>
</div>

[igordanchenko]

Is there any chance the InfiniteScroll component could let you set the root element for the observer? I believe that may be the problem.

I'm pretty sure that's exactly the reason since InfiniteScroll currently doesn't support custom root elements and defaults to the viewport.