When you don't set a fixed height for the inner container, the virtualization engine can't determine which rows are visible, rendering every row in the expanded section. By wrapping the inner list in a container with a specific height (say 300px), you let React Virtualized know how much space it has to work with. Then, using an AutoSizer, it calculates the available width and height, and the List component only renders the rows that fit within that space.

Maybe like this :

{expanded && (
  <div style={{ height: 300 }}>
    <AutoSizer>
      {({ height, width }) => (
        <List
          width={width}
          height={height}
          rowCount={rows.length}
          rowHeight={50}
          rowRenderer={innerRowRenderer}
        />
      )}
    </AutoSizer>
  </div>
)}