Trying to edit row’s in a HTML table using react.js

I have built a table in which user enter’s values in first three Cols and next four get’s calculated. Till here it is working Fine but when I change a respective value in a Col the corresponding Col’s calculated value does not change and the problem which arises after deleting is the row get’s deleted but it’s value shift’s in the below row

  const row1 = [];
  const [row, setRow] = useState();
  const [NewRow2, setNewRow2] = useState([0, 1, 2, 3, 4]);
  const [allRowsAdded, updateAllRows] = useState(5);

  const [IntensificationRatio, setIntensificationRatio] = useState()

  const [editFormData, setEditFormData] = useState({
    Injection_Speed: "",
    Fill_Time: "",
    Peak_Inj_Press: "",
    Viscosity: "",
    Shear_Rate: ""
  })

  const [isRowId, setIsRowId] = useState(null)

  const handleEditFormChange = (event) => {
    event.preventDefault();
    const fieldName = event.target.getAttribute("name");
    const fieldValue = event.target.value;
    const newFormData = { ...editFormData };
    newFormData[fieldName] = fieldValue;
    setEditFormData(newFormData);
  }

  const handleEditFormSubmit = (event) => {
    event.preventDefault();
    const editedValue = {
      id: isRowId,
      Injection_Speed: editFormData.Injection_Speed,
      Fill_Time: editFormData.Fill_Time,
      Peak_Inj_Press: editFormData.Peak_Inj_Press,
      Viscosity: editFormData.Fill_Time * editFormData.Peak_Inj_Press * IntensificationRatio,
      Shear_Rate: 1 / editFormData.Fill_Time,
    }
    const newValues = [...NewRow2];
    const index = NewRow2.findIndex((value) => value === isRowId)
    newValues[index] = editedValue;
    setNewRow2(newValues);
    console.log(newValues)

  }

In this part of code “row1” array and “row” variable is to serve the purpose of increasing row’s as per user’s need. “NewRow2” is the actual array using which row’s are created and values are entered in them. “allRowsAdded” is to keep the track of row’s getting added so that the “id” doesn’t clash. The “IntensificationRatio” is needed to Calculate Viscosity as you can see in the ” handleEditFormSubmit” function.

<tr key={rowId} onClick={() => setId(rowId)}>

<td> {rowId} </td>

<td> <input type='text' className="form-control" defaultValue={NewRow2[rowId].Injection_Speed} name="Injection_Speed" onChange={handleEditFormChange} /> </td>

<td> <input type='text' className="form-control" defaultValue={NewRow2[rowId].Fill_Time} name="Fill_Time" onChange={handleEditFormChange} /></td>

<td><input type='text' className="form-control" defaultValue={NewRow2[rowId].Peak_Inj_Press} name="Peak_Inj_Press" onChange={handleEditFormChange} /> </td>

<td> <input type='text' className="form-control" name="Viscosity" value={isNaN(Math.round(element.Viscosity)) ? '-' : Math.round(element.Viscosity)} readOnly /> </td>

<td>  <input type='text' className="form-control" name="Shear_Rate" value={isNaN(Number(element.Shear_Rate)) ? '-' : Number(element.Shear_Rate).toFixed(3)} readOnly /> </td>

<td> <input type='text' name="Absolute_Viscosity" value={rowId === 0 ? '-' : (isNaN(Math.round(NewRow2[rowId - 1].Viscosity - NewRow2[rowId].Viscosity)) ? '-' : Math.round(NewRow2[rowId - 1].Viscosity - NewRow2[rowId].Viscosity))} className="form-control" readOnly /></td>

<td> <input type='text' name="Drop_Viscosity" value={rowId === 0 ? '-' : (isNaN(Number(((NewRow2[rowId - 1].Viscosity - NewRow2[rowId].Viscosity) * 100) / (NewRow2[rowId - 1].Viscosity))) ? '-' : (Number(((NewRow2[rowId - 1].Viscosity - NewRow2[rowId].Viscosity) * 100) / (NewRow2[rowId - 1].Viscosity))).toFixed(1))} className="form-control" readOnly /></td>

<td> <i className="fa fa-trash viscocity_icons" onClick={() => deleteRow2(element)}></i> </td>
</tr>

This is the Table Row with Table data’s 1st Three input field’s are editable and hence contain a “onChange” and the rest 4 are readOnly.
What changes should i make so that i can edit and delete.

CodeSandBox Link :

https://codesandbox.io/s/solitary-architecture-zur17?file=/src/App.js:77-111