I migrated from MaterialReactTable V1 to V2 and got this error during edit : A state mutation was detected between dispatches. In the path

Question

I migrated from MaterialReactTable V1 to V2. in V1 all crud operations work well but in V2 edit got error and the others work well.

and changed:

    import {
      MaterialReactTableProps,
      ...
    } from 'material-react-table';

to:

    import {
      type MRT_TableOptions,
      ...
    } from 'material-react-table';

these types use in handleSaveRowEdits method for editing process.

handleSaveRowEdits method in V1:

    const handleSaveRowEdits: MaterialReactTableProps<IMachinery>['onEditingRowSave'] =
      async ({ exitEditingMode, row, values }) => {
        if (!Object.keys(validationErrors).length) {
          tableData[row.index] = {
            machinaryid: row.original.machinaryid,
            contractid: currentContractId,
            dateid: currentReportDateId,
            machine: values.machine,
            activeno: values.activeno,
            inactiveno: values.inactiveno,
            description: '',
          };
          //send/receive api updates here, then refetch or update local table data for re-render
          const request: IRequestMachinery = {
            contractid: currentContractId,
            dateid: currentReportDateId,
            machine: values.machine,
            activeno: values.activeno,
            inactiveno: values.inactiveno,
          }
          // console.log('machineries: ', machineries)

          editMachinery(Number(row.original.machinaryid), request)
          setTableData([...tableData]);
          exitEditingMode(); //required to exit editing mode and close modal
          setEditMode(true)
        }
      };

handleSaveRowEdits method in V2:

     const handleSaveRowEdits: MRT_TableOptions<IMachinery>['onEditingRowSave'] =
      async ({ row, values, table }) => {
        if (!Object.keys(validationErrors).length) {
          tableData[row.index] = {
            machinaryid: row.original.machinaryid,
            contractid: currentContractId,
            dateid: currentReportDateId,
            machine: values.machine,
            activeno: values.activeno,
            inactiveno: values.inactiveno,
            description: '',
          };
          //send/receive api updates here, then refetch or update local table data for re-render
          const request: IRequestMachinery = {
            contractid: currentContractId,
            dateid: currentReportDateId,
            machine: values.machine,
            activeno: values.activeno,
            inactiveno: values.inactiveno,
          }
          editMachinery(Number(row.original.machinaryid), request)
          setTableData([...tableData]);

          table.setEditingRow(null); //exit editing mode
          setEditMode(true)
        }
      };

and here is my redux action edit method(editMachinery):

    export const EditMachinery = (id: number, request: IRequestMachinery): ThunkResult<void> => async   
    (dispatch: Dispatch<MachineryAction>) => { 
        dispatch<IEditMachinery>({ 
            type: MachineryActionType.EDIT_MACHINERY 
        });
        try {
            const authToken = sessionStorage.getItem("token")
            const response: AxiosResponse<Machinery> = await      
            httpGenerator(authToken!).put(`machineries/${id}/`, request);
            dispatch<IEditMachinerySuccess>({ 
                type: MachineryActionType.EDIT_MACHINERY_SUCCESS, 
                payload: response.data
            });
            toastSuccess("اطلاعات مورد نظر با موفقیت ویرایش گردید.");

        } catch (err: any) {
            dispatch<IEditMachineryFail>({ 
                type: MachineryActionType.EDIT_MACHINERY_FAIL,
                payload: err
            });
            console.log('err: ', err)
            toastError("خطا در ویرایش اطلاعات مورد نظر!");
        }
    };

Please get me an idea to solve this problem.