React virtualized, Infinite Scroll - start at the bottom of List

Question

I am using react-virtualized to create an infinite scroll. The code for this is shown below (full link to the codesandbox where this code is taken from- https://codesandbox.io/p/sandbox/react-virtualized-infinite-scroll-demo-ngexu?file=%2Fsrc%2FApp.js%3A120%2C34 )

  <div className="repositoriesWrapper">
    <AutoSizer disableHeight={true}>
      {({ width }) => (
        <WindowScroller>
          {({ height, isScrolling, onChildScroll, scrollTop }) => (
            <InfiniteLoader
              isRowLoaded={isRowLoaded}
              loadMoreRows={loadMoreRows}
              rowCount={1000}
            >
              {({ onRowsRendered, registerChild }) => (
                <List
                  autoHeight
                  onRowsRendered={onRowsRendered}
                  ref={registerChild}
                  scrollToIndex={repositories.length}
                  scrollToAlignment="end"
                  height={height}
                  isScrolling={isScrolling}
                  onScroll={onChildScroll}
                  rowCount={repositories.length}
                  rowHeight={42}
                  rowRenderer={rowRenderer}
                  scrollTop={scrollTop}
                  width={width}
                />
              )}
            </InfiniteLoader>
          )}
        </WindowScroller>
      )}
    </AutoSizer>
    {isNextPageLoading && <span>loading more repositories..</span>}
  </div>

When the page renders, I want the list to automatically start at the bottom/end of the list, and as the user scrolls up, load more items. After researching, I discovered the props scrollToIndex={data.length} and scrollToAlignment="end" should be added to accomplish this. I have added these two props to the List component, however the list still starts from the top.

Is there an issue with this code, or is there any other methods/functionality needed in order to accomplish this? Thanks.