React virtualize - List overlaps for uneven height div

I used react-virtualize to display a list of posts. Problem: The list of posts is overlapping one over another.

I used cellMeasurer

const rowRenderer = ({ index, style, key, parent }) => {
    const post = props.posts[index];
    return (
      <CellMeasurer
        cache={cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
      >

cache code

  const cache = new CellMeasurerCache({
    defaultHeight: 200,
    fixedWidth: true,
  });

Autosizer and List code

<AutoSizer disableHeight>
        {({ width }) => (
          <List
            height={window.innerHeight - 200}
            overscanRowCount={10}
            width={width}
            rowHeight={cache.rowHeight}
            rowCount={props.posts.length}
            rowRenderer={rowRenderer}
          />
        )}
      </AutoSizer> 

Note: Each post has a different height. Each post has show-comment button clicking on it overlaps with next post. I have attached a screenshot of this.

After scroll it adjust its height. initially it has no overlapping. after clicking show comments it overlaps.