флажок не отображается во время просмотра в сетке данных материала-ui

Некоторый основной код, связанный с сеткой данных

  const apiRef = React.useRef(null);
  const [gotApiRef, setGotApiRef] = useState(false);
  const [gotApiRef2, setGotApiRef2] = useState(false);
  console.log("apiRef.current: ", apiRef.current);
  const ObjRef = React.useRef({
    dataRe: {
      columns: [],
      rows: [],
    },
    tempRe: {
      rows: [],
    },
  });

const columns = [
    { field: "lenderName", headerName: "Lender Name", width: 200 },
    { field: "endpoint", headerName: "Endpoint", width: 250 },
  ];

// filling row data with props

useEffect(() => {
    if (props.data.docs) {
      props.data.docs.map((row) => {
        let temp = {
          id: row._id,
          lenderName: row.name,
          endpoint: row.endpoint,
        };
        ObjRef.current.tempRe.rows.push(temp);
      });
      console.log("2. ObjRef.current.tempRe.rows:", ObjRef.current.tempRe.rows);
    }
  }, [props.data]);


// ====================== Checkbox Selection useEffect =========================
useEffect(() => {
    if (gotApiRef) {
      console.log("entry in useEffect");
      //console.log("1. ObjRef.current.dataRe: ", ObjRef.current.dataRe);
      console.log("In useEffect apiRef.current: ", apiRef.current);
      const dataRe = {
        columns,
        rows: ObjRef.current.tempRe.rows,
      };
      counterRef.current.renderCount += 1;
      // console.log(
      //   "3 counterRef.current.renderCount:",
      //   counterRef.current.renderCount
      // );

      ObjRef.current.dataRe = dataRe;

      const rowModels = apiRef?.current?.getRowModels();
      if (rowModels != undefined) {
        console.log("5 ObjRef.current.dataRe:", ObjRef.current.dataRe);
        console.log("in rowModel not undefined..");
        console.log("5. rowModels*:", rowModels);
        if (apiRef.current) {
          console.log("in apiRef.current*", apiRef.current);
          setGotApiRef2(true)
          apiRef.current.setRowModels(
            rowModels.map((r) => {
              console.log("in rowModels.map");
              r.selected = true;
              return r;
            })
          );
        }
      }
    }
  }, [gotApiRef]);


//in return

            <DataGrid
              rows={ObjRef.current.dataRe.rows}
              columns={ObjRef.current.dataRe.columns}
              // {...ObjRef.current.dataRe}
              checkboxSelection
              onSelectionChange={(newSelection) => {
                setSelection(newSelection.rows);
              }}
              components={{
                noRowsOverlay: (params) => {
                  console.log(
                    "in noRowOverlay ObjRef.current.dataRe:",
                    ObjRef.current.dataRe
                  );
                  console.log("params in noRowsOverlay**:", params);
                  if (!apiRef.current) {
                    apiRef.current = params.api.current;
                    console.log(
                      "apiRef.current in noRowOverlay:",
                      apiRef.current
                    );
                    setGotApiRef(true);
                  }
                  return <div>No rows</div>;
                },
              }}
            />

Я где-то читал, что использование Layout Effect используется с использованием Ref, даже пробовал это, но без помощи, этот вопрос работает после этого вопроса с этим именем. Могу ли я инициализировать выбор флажка в Material-ui DataGrid?

Могу ли я инициализировать выбор флажка в материале- ui DataGrid?

Я получаю данные в apiRef.current Я устанавливаю данные в ObjRef.current.dataRe после настройки я должен получить данные в rowModels, но я получаю rowModels как null