Hi could you tell me what's wrong in following react code: //import React from 'react'
import * as React from 'react';
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { IMinimalSalary } from '../../../types/global.typing.js';
import { Button, CircularProgress } from "@mui/material";
import { Add } from "@mui/icons-material";
import { GridColDef} from '@mui/x-data-grid/models'
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/DeleteOutlined';
import SaveIcon from '@mui/icons-material/Save';
import CancelIcon from '@mui/icons-material/Close';
import httpModule from "../../../helpers/http.module"; 
import {
   GridRowModes,
   DataGrid,
   GridToolbarContainer,
   GridActionsCellItem,
   GridRowEditStopReasons,
 } from '@mui/x-data-grid';
 import {
   randomCreatedDate,
   randomTraderName,
   randomId,
   randomArrayItem,
 } from '@mui/x-data-grid-generator';

const MinimalSalaryList = () => {
    const [Consumption, setConsumption] = useState<IMinimalSalary[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const redirect = useNavigate();
    
    
const initialRows = [
   {
      id: "10",
      nazwa:  "10",
      wartosc: "10",
      createdAt:  "10"
   },
   {
      id: "10",
      nazwa:  "10",
      wartosc: "10",
      createdAt:  "10"
   }
];

  const [rows, setRows] = React.useState(initialRows);
  const [rowModesModel, setRowModesModel] = React.useState({});

    const column: GridColDef[] = [
        { field: "id", headerName: "ID", width: 100 },
        { 
            field: "nazwa",
            headerName: "Nazwa",
            width: 200,
            editable: true 
        },
        { 
            field: "wartosc",
            headerName: "Wartosc",  
            width: 150,
            editable: false
        },
        {
          field: "actions",
          type: "actions",
          headerName: "Actions", 
          width: 100,
          cellClassName: "actions",
          getActions: ({ id }) => {
            const isInEditMode =  rowModesModel[id]?.mode === GridRowModes.Edit;
    
            if (isInEditMode) {
              return [
                <GridActionsCellItem
                  icon={<SaveIcon />}
                  label="Save"
                  sx={{
                    color: 'primary.main',
                  }}
                  onClick={handleSaveClick(Number(id))}
                />,
                <GridActionsCellItem
                  icon={<CancelIcon />}
                  label="Cancel"
                  className="textPrimary"
                  onClick={handleCancelClick(Number(id))}
                  color="inherit"
                />,
              ];
            }
            return [
               <GridActionsCellItem
                 icon={<EditIcon />}
                 label="Edit"
                 className="textPrimary"
                 onClick={handleEditClick(Number(id))}
                 color="inherit"
               />,
               <GridActionsCellItem
                 icon={<DeleteIcon />}
                 label="Delete"
                 onClick={handleDeleteClick(Number(id))}
                 color="inherit"
               />,
            ];
         }
     }
      
    ];

 useEffect(() => {
     setLoading(true);
     httpModule
        .get<IMinimalSalary[]>("/PodstawaWymiaru/Get")
        .then((response) => {
           setConsumption(response.data);
           console.log(response.data);
           setLoading(false);
        })
        .catch((error) => {
           alert("Error");
           console.log(error);
           setLoading(false);
        });
  }, []);


  const handleRowEditStop = (params:any, event:any) => {
   if (params.reason === GridRowEditStopReasons.rowFocusOut) {
     event.defaultMuiPrevented = true;
   }
 };

 const handleEditClick = (id:number) => () => {
   setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
 };

 const handleSaveClick = (id:number) => () => {
   setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
 };

 const handleDeleteClick = (id:number) => () => {
   setRows(rows.filter((row:any) => row.id !== id));
 };

 const handleCancelClick = (id:number) => () => {
   setRowModesModel({
     ...rowModesModel,
     [id]: { mode: GridRowModes.View, ignoreModifications: true },
   });

   const editedRow = rows.find((row:IMinimalSalary) => row.id === id);
   if (editedRow.isNew) {
     setRows(rows.filter((row) => row.id !== id));
   }
 };

 const processRowUpdate = (newRow:any) => {
   const updatedRow = { ...newRow, isNew: false };
   setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row)));
   return updatedRow;
 };

 const handleRowModesModelChange = (newRowModesModel:any) => {
   setRowModesModel(newRowModesModel);
 };

  return (
    <div className="content comapnies">
    <div className="heading">
       <h2>Pensja minimalna</h2>
       <Button variant="outlined" onClick={() => redirect("/MiminalPension/add")}>
          <Add />
       </Button>
    </div>
    <DataGrid editMode='row' rows={Consumption} columns={column} getRowId={(row) => row.id} rowHeight={50} />
 </div>
  )
}

export default MinimalSalaryList