TypeError: apiRef.current.updateRows is not a function in material ui data-grid

Question

I want o make a Data Grid Table using Material UI. Where User can update particular row data from a form submission. For the performance issue, I want to add useGridApiRef which is comes from "material-ui/data-grid". but I faced apiRef.current.updateRows is not a function this prblm. Here is my code:

  import { rows, columns } from "./helperData.js";
  import { DataGrid, useGridApiRef } from "@material-ui/data-grid";
    const DataGridPractice = () => {
      const [data, setData] = useState(rows)
      const [currentRow, setCurrentRow] = useState(null);
      const [showDialog, setShowDialog] = useState(false);
      const [isSending, setIsSending] = useState(false)
      const apiRef = useGridApiRef()
      const handleChange = e => {
        setCurrentRow({...currentRow, [e.target.name]: e.target.value})
      }
      const updateRow = () => {
        //  const updateRows = data.map((item) => item.id === currentRow.id ? currentRow : item)
        //  setData(updateRows)
       apiRef.current.updateRows([currentRow])
        
         setShowDialog(false)
      }
      
    
     
      return (
        <>
          <Container>
            {currentRow && (
              <Dialog
                open={showDialog}
                TransitionComponent={Transition}
                keepMounted
              >
                <DialogTitle>Update data table</DialogTitle>
                <DialogContent>
                  <CustomeTextField
                    variant="standard"
                    margin="normal"
                    label="First Name"
                    name="firstName"
                    value={currentRow.firstName}
                    onChange={handleChange}
                  />
                  <CustomeTextField
                    variant="standard"
                    margin="normal"
                    label="Last Name"
                    name="LastName"
                    value={currentRow.lastName}
                    onChange={handleChange}
                  />
                  <CustomeTextField
                    variant="standard"
                    margin="normal"
                    label="Emal Address"
                    name="email"
                    value={currentRow.email}
                    onChange={handleChange}
                  />
                </DialogContent>
                <DialogActions>
                  <CustomeButton color="primary" variant="outlined" onClick={updateRow}>Update</CustomeButton>
                  <CustomeButton
                  color="secondary"
                    variant="outlined"
                    onClick={() => setShowDialog(false)}
                  >
                    Cencel
                  </CustomeButton>
                </DialogActions>
              </Dialog>
            )}
            <CustomeButton
            color="primary"
              variant="contained"
              disabled={!currentRow}
              onClick={() => setShowDialog(true)}
            >
              EDIT
            </CustomeButton>
            <Paper component={Box} width={1} height={600}>
              <DataGrid
                onRowSelected={(item) => setCurrentRow(item.data)}
                rows={data}
                columns={columns}
                pageSize={10}
                apiRef={apiRef}
                
              />
            </Paper>
          </Container>
        </>
      );
    };
    
    export default DataGridPractice;

sample output OUTPUT-IMAGE

Answer 1

it seems like apiRef prop is not enabled from datagrid, Im not sure if this is a bug because the apiRef type is forced as undefined, or a feature by other license's version. For this use case, there is a hack that might be useful to you: Attaching apiRef

Answer 2

It's Data Grid Pro's feature, so you need a license for it.