Issue Deleting Rows in Material-UI DataGrid: Error "No row with id # found"

Question

I'm encountering an error in a React app using Material-UI's DataGrid component when attempting to delete rows. Here is the full code snippet:

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import IconButton from '@mui/material/IconButton';
import DeleteSharp from '@mui/icons-material/DeleteSharp';
import Tooltip from '@mui/material/Tooltip';

const TestComponent = () => {
  const [draftColumns, setDraftColumns] = useState([]); // State to hold DataGrid rows

  // Function to delete rows
  const handleDraftColumnDelete = async row => {
    const result = draftColumns.filter(col => col.index !== row.index);    
    setDraftColumns(result);
  };

  const columns = [
    // ... other columns setup
    {
      field: 'actions',
      headerName: 'Actions',
      width: 130,
      headerAlign: 'center',
      align: 'center',
      renderCell: ({ row }) => {
        if (row.column && row.column.value && !row.column.value.isRequired) {
          return (
            <Tooltip title='Delete'>
              <IconButton size='small' onClick={() => handleDraftColumnDelete(row)}>
                <DeleteSharp color='error' />
              </IconButton>
            </Tooltip>
          );
        } else return <></>;
      },
    },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        columns={columns}
        rows={draftColumns}
        getRowId={row => row.index}
        disableSelectionOnClick
      />
    </div>
  );
};

export default TestComponent;

The issue arises when I attempt to delete a row using the handleDraftColumnDelete function. Clicking the delete button triggers the function, but I receive an error "Uncaught Error: No row with id #11 found". I suspect there might be an issue with how I am identifying or deleting rows.

Any help, suggestions, or guidance would be greatly appreciated. Thank you!