My datagrid from mui x has formField. i use hookform and zod for handling form.

in order to be compatible with hookform i add

const { fields, append, remove } = useFieldArray({ control, name: "estimateItems", }); console.log("fields", fields);

for adding and removing rows ` const incrementTableRow = () => { console.log("incremented");

append({
  itemId: "",
  taxIds: [], // Default value for taxIds
  description: "",
  quantity: 0,
  price: 0,
  discount: 0,
  isDiscountPercentage: false,
  amount: 0,
  rowIndex: fields.length + 1,
});

};

const decrementTableRow = (data) => { console.log("delete", data);

remove(data.row.rowIndex);

};`

issue is i cant handle serailize rows prorperly.

this is columns obj ` { field: "rowIndex", headerName: "#", width: 40, align: "center", headerAlign: "center", // flex: 1, renderCell: (params) => { console.log("#", params);

      return params.value;
    },
  },`

i try to handle it rendercell but couldnt yet. maybe someone faced similar issue