Grid height does not respond to change in class name prop

[chirayuchiripal]

Describe the bug

When grid height is changed in response to events such as page size (10 records, 100 records, etc.), the height of the grid does not adapt to that new height (virtualization height calculation problem??). The numbers of rows rendered are based on the initial height set on the grid.

To Reproduce

1. Use the below sample CSS and Component code to reproduce the issue.
2. Note that when Big Grid button is clicked, the height of the grid changes but rows are not rendered to fit that height.
3. The numbers of rows rendered are based on the initial height set on the grid leaving an empty block of space at the bottom.
4. If you scroll through rows in such scenario you will see scroll bar goes all the way below and goes through that empty block of space in the grid.

div.big-grid {
  height: 1000px;
}

div.small-grid {
  height: 500px;
}

export const ReactDataGridDemo = (): JSX.Element => {

  const [className, setClassName] = React.useState<string>("small-grid");

  return (
    <div style={{border: '5px solid black'}}>
      <button onClick={() => setClassName("big-grid")}>Big Grid</button>
      <button onClick={() => setClassName("small-grid")}>Small Grid</button>
      <ReactDataGrid<unknown>
        className={styles[className]}
        rows={sampleData} // Use some large number of rows.
        columns={columns} // Use any sample columns.
      />
    </div>
  );
}

Expected behavior

The height of the grid to adjust accordingly on response to change in props.

Environment

• react-data-grid version: 7.0.0-beta.13
• react/react-dom version: 17.0.2

Additional context