Pre-selecting Rows in MUI DataGrid with Selection Model in React

Question

My Custom Mui DataGrid

import * as React from "react";
import {
  DataGrid,
  GridCallbackDetails,
  GridEventListener,
  GridRowParams,
  GridSelectionModel,
} from "@mui/x-data-grid";
import MuiCircularProgress from "../circularProgress";
import CheckboxWrapper from "./checkbox";
import "./dataGrid.style.scss";

type tpProps = {
  columns: any[];
  rows: [];
  pageSize: number;
  loading: boolean;
  checkboxSelection?: boolean;
  selectionModel?: GridSelectionModel;
  onSelectionModelChange?:
    | ((
        selectionModel: GridSelectionModel,
        details: GridCallbackDetails<any>
      ) => void)
    | undefined;
  onCellClick?: GridEventListener<"cellClick"> | undefined;
  isRowSelectable?: (params: GridRowParams) => boolean;
};

const MuiDataGrid = (props: tpProps): JSX.Element => {
  const [pageSize, setPageSize] = React.useState(props.pageSize ?? 10);

  const isRowSelectable = (params: GridRowParams) => {
    const selectable = props.isRowSelectable?.(params) ?? true;
    return selectable;
  };

  const getRowClassName = (params: GridRowParams) => {
    return isRowSelectable(params) ? "" : "not-selectable";
  };

  return (
    <div className="mui-data-grid">
      <DataGrid
        pageSize={pageSize}
        onPageSizeChange={(newPage: React.SetStateAction<number>) =>
          setPageSize(newPage)
        }
        pagination
        columns={props.columns}
        rows={props.rows}
        selectionModel={props.selectionModel}
        checkboxSelection={props.checkboxSelection ?? false}
        isRowSelectable={props.isRowSelectable}
        components={{
          BaseCheckbox: CheckboxWrapper,
          LoadingOverlay: () => (
            <div
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                background: "white",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <MuiCircularProgress />
            </div>
          ),
        }}
        loading={props.loading}
        onSelectionModelChange={props.onSelectionModelChange}
        onCellClick={props.onCellClick}
        getRowClassName={getRowClassName}
      />
    </div>
  );
};

export default MuiDataGrid;

Here I am using this MUI Datagrid

interface KeywordsPageState {
  showUnSelected: boolean;
  loading: boolean;
  columns: GridColDef[];
  rows: { [key: string]: any };
  selectedRows: { [key: string]: any }[];
  searchVolume: number;
  selectionModel: GridSelectionModel;
}

const KeywordsPage = (): JSX.Element => {
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();

  const [state, setState] = useState<KeywordsPageState>({
    showUnSelected: false,
    loading: false,
    columns: [],
    rows: [],
    selectedRows: [],
    searchVolume: 0,
    selectionModel: [],
  });
  
  useEffect(() => {
    let keywordsResp = DUMMY_KEYWORD;
    let columns: any[] = [];
    Object.keys(keywordsResp[0]).map((column) => {

      if (
        column !== "blacklistedWord" &&
        (!column.startsWith("B0") || column === params.asin)
      )
        columns.push({
          field: column,
          headerName:
            column === params.asin ? column : camelCaseToNormalSentence(column),
          flex: 1,
          sortable: true,
        });

      return columns;
    });
    let preSelecteRows: any[] = [];
    let arr = [
      ...new Set(
        keywordsResp.reduce((acc: any[], row: any, index: any) => {
          if (acc.length < 10 && !row?.blacklistedWord) {
            acc.push({
              id: index,
              ...row,
            });
          }
          return acc;
        }, preSelecteRows)
      ),
    ];

    setState({
      ...state,
      loading: false,
      columns,
      rows: keywordsResp.map((row: any, index: any) => ({
        id: index,
        ...row,
      })),

      selectionModel: Array.from(new Set(arr.map((obj) => obj.id)))
        .map((id) => arr.find((obj) => obj.id === id))
        .map((r) => r.id),
    });
  }, []);



  return (
    <Grid
      container
      style={{ height: "100vh", background: "#F5F5F5" }}
      className="keywords-container"
    >
     <MuiDataGrid
            columns={state.columns}
            rows={(state.rows as any) ?? []}
            pageSize={20}
            loading={state.loading}
            isRowSelectable={(params: GridRowParams) =>
              !params.row?.blacklistedWord
            }
            checkboxSelection
            // selectionModel={state.selectionModel}
            onSelectionModelChange={(e) => {
              setState({ ...state, selectionModel: e });
              const selectedIDs = new Set(e);
              const selectedRows = state.rows.filter((row: any) =>
                selectedIDs.has(row.id)
              );
            
              setState({ ...state, selectedRows });
            }}
          ></MuiDataGrid>
         

    </Grid>
  );
};

export default KeywordsPage;

I have implemented a DataGrid component in React using the Material-UI library with a selection model. The DataGrid displays tabular data and allows for selecting rows using a selection model. I have set it up so that the first 10 rows are pre-selected when the component is initially rendered, excluding any disabled rows.

However, I am facing an issue where the pre-selected rows cannot be un-selected or new rows cannot be selected after the component has rendered. Despite trying to update the selection state using the selection model's APIs, the changes do not take effect in the UI. I have checked that the selection state is being correctly updated in the component's state, but the DataGrid does not reflect these changes.

I have reviewed the documentation and examples of the Material-UI DataGrid and selection model, but I have not been able to identify the issue. I need help in resolving this issue and enabling the ability to un-select pre-selected rows or select new rows in the DataGrid with the selection model in my React component