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.

[jrga03]

I was struggling with the same issue a few days earlier. I also patterned my component to the WindowScroller, AutoSizer, and List example. What fixed it for me was assigning a ref to the parent container of the WindowScroller and using it as the scrollElement like so:

const containerRef = useRef()

return (
  <div ref={containerRef}>
    <WindowScroller scrollElement={containerRef.current}>
      {() => { ... }}
    </WindowScroller>
  </div>
)

EDIT: I also didn’t pass the onScroll={onChildScroll} prop to <List />

[jrga03]

I’m using react: 17.0.1, react-virtualized: 9.22.3