I am building a react component using MUI X data grid. I see an empty column added at the end

Question

Here is the screen shot of the UI and generated CSS.This code is to display 2 columns from the driver object. I tried removing the sx prop thinking that might be causing the issue but it is not helping.

import React from "react";
import { DataGrid } from "@mui/x-data-grid";
export default function DriverRisk({ setSelectedRow, driver }) {
const columns = [
    {
      field: "FirstNm",
      headerName: "First Name",
      sortable: false,
      width: 150,
    },
    {
      field: "LastNm",
      headerName: "Last Name",
      sortable: false,
      width: 150,
    },
  ];
const rows = driver.map((person) => {
    return {
      FirstNm: person.FirstNm,
      LastNm: person.LastNm,
      id: person.FirstNm + person.LastNm,
    };
  });
return (
    <div className="reports-carfax-vehicle-data">
      <DataGrid
        rows={rows}
        columns={columns}
        disableColumnMenu
        hideFooterPagination
        hideFooter
        columnHeaderHeight={45}
        density={"compact"}
        sx={{
          "& .MuiDataGrid-columnHeaders": { border: "none" },
          "& .MuiDataGrid-columnHeaderTitle": {
            fontWeight: "bold",
          },
          "& .MuiDataGrid-cell:focus-within": {
            outline: "none",
          },
          "& .MuiDataGrid-columnHeader:focus": {
            outline: "none",
          },
        }}
      />
    </div>
  );
}

Answer 1

I don't know the entire explanation. But when i declare flex attribute in one of columns object, DataGrid will not create addition column and row. Just try it.

example:

const columns = [
    {
      field: "FirstNm",
      headerName: "First Name",
      sortable: false,
      width: 150,
      flex: 1, // try to add this at least one of object in column
    },
    {
      field: "LastNm",
      headerName: "Last Name",
      sortable: false,
      width: 150,
    },
];