Just fyi changed version to ^6.x.x in the codesandbox example and seems this doesn't happen.

Thank you @boldurean for reporting, I can reproduce the bug, it seems that the virtual scroller is miscomputing the render zone through the end when a cell is focused. And yes it isn't there in v6 which makes it a regression.

@MBilalShafi thanks for response.
It looks like it happens as well when cell is not selected. Some cells could render images and be auto-sized based on the img height, not selecting the row in this case will cause same issue.

We're seeing this same issue in our project (with Data Grid Pro). Scrolling a selected row (or the last selected row if multiple rows are selected) out of view causes a scrolling "jump." You can also repro this in the Row Selection docs: https://mui.com/x/react-data-grid/row-selection/#multiple-row-selection

Make a couple changes to the demo code (see comments):

import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function MultipleRowSelectionGrid() {
  const { data, loading } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        {...data}
        getRowHeight={() => 'auto'} // ADD THIS PROP
        loading={loading}
        pagination
        initialState={{
          ...data.initialState,
          pagination: {
            paginationModel: {
              pageSize: 20, // INCREASE PAGE SIZE TO ALLOW ROOM FOR SCROLLING OUT OF VIEW
            },
          },
        }}
      />
    </div>
  );
}

Then select one or more rows and scroll till the bottom-most selected row is out of view. You should see the jump.