React Virtualized Window Scroller not rendering new rows

I'm trying to follow the example for the window scroller in react virualized but can't seem to get any new rows to render (See example).

Here's the code I wrote:

const Row = ({ index, isScrolling, isVisible, key, style }) => {
    console.log(`Rendering row ${index}`);
    return tracks[index] ? (
      <TrackItem
        key={key}
        id={tracks[index].id}
        title={tracks[index].title}
        artist={tracks[index].artist}
        album={tracks[index].album}
        explicit={tracks[index].explicit}
        albumArtKey={tracks[index].albumArtUrl}
        trackKey={tracks[index].trackUrl}
        style={style}
      />
    ) : (
      <></>
    );
  };

  return (
    <div className="bg-white h-library-full-height">
      <Header trackCount={tracks.length} />
      <WindowScroller ref={windowScrollerRef}>
        {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
          <div className="flex-auto">
            <AutoSizer disableHeight>
              {({ width }) => (
                <div ref={registerChild}>
                  <List
                    className="outline-none"
                    ref={listRef}
                    autoHeight
                    height={height}
                    isScrolling={isScrolling}
                    onScroll={onChildScroll}
                    overscanRowCount={5}
                    rowCount={tracks.length}
                    rowHeight={48}
                    rowRenderer={Row}
                    scrollToIndex={scrollToIndex}
                    scrollTop={scrollTop}
                    width={width}
                  />
                </div>
              )}
            </AutoSizer>
          </div>
        )}
      </WindowScroller>
    </div>
  );

For whatever reason the example doesn't seem to work in my app. It does however work when I use an AutoSizer without the WindowScroller attached. Struggling to see the issue here.