EditableProTable Edit is Not working in ant design pro

Question

I created table with ant design ProTable Component and its Edit function is not working. It showing error like this. ("Cannot read properties of undefined (reading 'toString')"). I tried many ways to solve this problem and cannot found a solution yet.

I want get table data from CSV file upload. That function is already working and data retrieved to the table.

const columns = [
    {
      title: 'First Name',
      valueType: 'string',
      typeof:'string',
      dataIndex: 'fName',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '' }],
        };
      },
    },
    {
      title: 'Last Name',
      valueType: 'string',
      typeof:'string',
      dataIndex: 'lName',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '' }],
        };
      },
    },
    {
      title: 'Email',
      valueType: 'string',
      typeof:'string',
      dataIndex: 'email',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '' }],
        };
      },
    },
    {
      title: 'Position',
      valueType: 'string',
      typeof:'string',
      dataIndex: 'position',
      formItemProps: () => {
        return {
          rules: [{ required: true, message: '' }],
        };
      },
    },
    {
      title: 'Actions',
      valueType: 'option',
      width: 200,
      render: (text, record, _, action) => [
        <a
          key="delete"
          onClick={() => {
            setData(data.filter((item) => item.id !== record.id));
          }}
        >
          Delete
        </a>,
        <a
          key="editable"
          onClick={() => {
            var _a;
            (_a = action === null || action === void 0 ? void 0 : action.startEditable) === null ||
            _a === void 0
              ? void 0
              : _a.call(action, record.id);
          }}
        >
          Edit
        </a>,
      ],
    },
  ];

EditableProTable
          rowKey="id"
          actionRef={actionRef}
          headerTitle=""
          maxLength={5}
          recordCreatorProps={false}
          columns={columns}
          request={async () => ({
            data: data,
            total: 3,
            success: true,
          })}
          value={csvArray}
          onChange={setCsvArray}
          editable={{
            type: 'multiple',
            editableKeys,
            onSave: async (rowKey, data, row) => {
              await waitTime(2000);
            },
            onChange: setEditableRowKeys,
            actionRender: (row, config, defaultDom) => [
              defaultDom.save,
              defaultDom.delete || defaultDom.cancel,
            ],
          }}
        />[![enter image description here][1]][1]

Answer 1

The editableKeys array contains rows that are in the editing state

const [editableKeys, setEditableRowKeys] = useState(() => csvArray.map((item) => item.index)); // or .map((item=) => item.key));