MUI X Datagrid Resets on Row Selection

I'm using MUI X Datagrid in my application, where a list of files and folders are displayed. I have enabled row selection for files, but whenever a row is being selected the datagrid resets and it scrolls back to the top.

For example if I select 100th row for each selection it scrolls back to the very top i.e. 1st row. I have to scroll back again all the way down to make the next selection.

I'm adding the code below. I searched the docs, they have the exact same code. Doesn't seem to be of any help. How do I fix this?

const [selectedFilter, setSelectedFilter] = useState({
  type: 'include',
  ids: new Set(),
}); // has files selected for export in grid

<CustomDataGrid
  showToolbar
  disableColumnMenu={true}
  rows={Array.isArray(folderContents.folderData) &&
    Array.isArray(folderContents.fileData)
      ? [...folderContents.folderData, ...folderContents.fileData]
      : []}
  columns={fileColumns}
  slots={{
    toolbar: CustomToolbar,
    noRowsOverlay: (() => {
      return (
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100%',
            '& .no-rows-primary': {
              fill: '#3D4751',
            },
            '& .no-rows-secondary': {
              fill: '#1D2126',
            },
            '& .MuiDataGrid-virtualScroller': {
              overflowY: 'auto',
              scrollBehavior: 'smooth',
              maxHeight: '20rem',
              paddingRight: '0.5rem',              
            },
          }}
        >
          No folders or files
        </Box>
      )
    }),
  }}
  pagination
  initialState={{
    pagination: {
      paginationModel: {
        pageSize: 20,
      },
    },
  }}
  pageSizeOptions={[5, 10, 20, 50, 100]}
  checkboxSelection
  onRowClick={(params) => {
    setSelectedFiles([])
    setSelectedFilter({
      type: 'include',
      ids: new Set(),
    })
    if (params.row.type === 'Folder') {
      setIsClickedFromBreadcrumbs(false)
      setFolderBreadcrumbs((currState) => {
        return [...currState, { id: params.row.id, name: params.row.name }]
      })
    }
  }}
  isRowSelectable={(params) => params.row.type !== 'Folder'}
  getRowClassName={(params) => {
    return params.row.type === 'Folder' ? 'hide-checkbox' : '';
  }}
  onRowSelectionModelChange={
    (newSelectionModel) => {
      console.log(newSelectionModel)
      const currSelectedFilter = [
        ...folderContents.folderData,
        ...folderContents.fileData
      ].filter((file) => Array.from(newSelectionModel.ids).includes(file.id));
      setSelectedFilter(newSelectionModel);
      const selected = currSelectedFilter.map((ele) => [
        ele.name,
        ele.url,
        ele.type,
        `${moment(ele.createdAt.split('+')[0]).utc().format('L LT')} PDT`,
        folderBreadcrumbs[folderBreadcrumbs.length -1].name
      ]);                            
      setSelectedFiles(selected);
    }
  }
  rowSelectionModel={selectedFilter}
  sx={{
    height: '100%',
    cursor: 'pointer',
    borderRadius: '8px',  
  }}
/>

I ran into a similar issue with the DataGrid, check your definition of the CustomDataGrid component. The following is my code for the CustomDataGrid which I had originally referred from a different Stack Overflow post for an issue related to customizing DataGrid scrollbars, but this had been causing the grid to reset all along.

const CustomDataGrid = styled(DataGrid)(({ theme }) => ({
    '&::-webkit-scrollbar': {
      width: '5px',
      backgroundColor: '#fff',
    },
    '&::-webkit-scrollbar-track': {
      WebkitBoxShadow: 'inset 0 0 6px rgba(83, 83, 83, 0.07)',
      backgroundColor: '#f1f1f1',
    },
    '&::-webkit-scrollbar-thumb': {
      background: 'linear-gradient(to bottom, #6BADCE, #d7dde8)',
      borderRadius: '10px',
    },
    '&::-webkit-scrollbar-thumb:hover': {
      backgroundColor: '#a8a8a8 !important',
    },
  }));

I would suggest removing this and just use the original DataGrid component from MUIX.