React Material UI – data grid using processRowUpdate – Reactjs

I want to edit the grid only the number fields and when done editing all use the save button to send the array to the backend to get stored. I currenlty can´t exit the edit mode, when on the handleEditCellChange I get this error TypeError: Cannot read properties of undefined (reading ‘id’)
at getRowIdFromRowModel (gridRowsUtils.js:30:1) any ideas :

this is the code:

import React, { Component } from "react"
import ScoreDataService from "../../services/score.service";
import { Link } from "react-router-dom";
import { DataGrid, useGridApiRef } from '@mui/x-data-grid';`

export default class StudentList extends Component {
  constructor(props) {
    super(props);
    this.ObtenerPunteos = this.ObtenerPunteos.bind(this);
    this.GuardarPunteos = this.GuardarPunteos.bind(this);
    this.Reset = this.Reset.bind(this);
    

    this.state = {
      punteos: [],
      punteos_viejos: [],
      isUpdated: false,
     // apiRef: useGridApiRef(),
    };

    
  }

   componentDidMount() {
    this.ObtenerPunteos();
    this.GuardarPunteos();
    this.Reset();
   // this.handleEditCellChange();
  }

  Reset(){
    const { punteos , punteos_viejos, isUpdated} = this.state;
    //this.isUpdated=  false;
    //this.punteos = this.punteos_viejos;
    this.setState({isUpdated: false});
  }

  ObtenerPunteos() {
   ScoreDataService.getAll(7)
      .then(response => {
        this.setState({
          punteos: response.data,
          punteos_viejos: response.data,
          update_punteos: response.data
        });
        console.log(response.data);
        console.log('dsjfkld');
      })
      .catch(e => {
        console.log(e);
      });
  }

  GuardarPunteos(){
    //aqui hago el guardar en el server.
    //const {punteos} = this.state;
    //console.log(this.punteos);
    this.setState({isUpdated: false});
  }

  handleEditCellChange = (params) => {
        //const apiRef = useGridApiRef();
        //apiRef.current.stopCellEditMode({ id: params.id });
    console.log('entro');
        console.log(params);
    //const apiRef = useGridApiRef();
    const { punteos, isUpdated } = this.state;
    console.log(punteos);
    console.log(params);
    console.log(params.id);


    for (var i=0; i < 12; i++) {
        console.log('este');
        console.log(punteos[i].id);
        console.log(params.id);
        if(punteos[i].id == params.id){
            console.log('entra');
            punteos[i].nota1 = params.nota1;
            punteos[i].nota2 = params.nota2;
            punteos[i].nota3 = params.nota3;
            punteos[i].nota4 = params.nota4;
        

        break;
        }
        
    }

  
     this.setState({isUpdated: true })
     



    //console.log(punteos);

    // update the state with the edited cell's value
  /*  const { punteos } = this.state;
    const updatedPunteos = [...punteos];
    updatedPunteos[params.id - 1][params.field] = params.value;
    this.setState({ punteos: updatedPunteos, isUpdated: true });*/
  };

  

handleProcessRowUpdateError = (error: Error) => {
    console.log(error);
    const { punteos } = this.state;
    console.log(punteos);
  };



  render() {
    console.log('a');
    const{punteos_viejos, punteos, isUpdated} = this.state;
    console.log('jj');
    const columns = [
         { field: 'id', headerName: 'id', width: 70 },
         { field: 'curso', headerName: 'Curso', width: 200 },
         { field: 'nota1', headerName: 'Bimestre 1', width: 130, editable: true, type: 'number'},
         { field: 'nota2', headerName: 'Bimestre 2', width: 130, editable: true, type: 'number'},
         { field: 'nota3', headerName: 'Bimestre 3', width: 130, editable: true, type: 'number' },
         { field: 'nota4', headerName: 'Bimestre 4', width: 130, editable: true, type: 'number' },
    ];
    //const rows = ;

    return(
    <div style={{ height: 800, width: '100%' }}>
      {punteos && (<DataGrid
        rows={punteos || []}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        processRowUpdate={this.handleEditCellChange}
        onProcessRowUpdateError={this.handleProcessRowUpdateError}

      /> )}
      <button onClick={this.GuardarPunteos} disabled={!isUpdated}>Save</button>
      <button onClick={this.Reset} disabled={!isUpdated}>Reset</button>
    </div>
    );  }
}