Ant Design table delete and edit functionalities not reflecting on the PG database

Question

I am trying to implement crud functionalities in Ant design table. I observed that the delete and edit functionalities only works on the instance when I perform the operations on initial render, but after reloading the component, the table returns back to its initial state and the operations don't affect the database in any way.

I see this error on my console

     Type '{ title: string; dataIndex: string; key: string; align: string; editable: boolean; 
     render?: undefined; }' is not assignable to type 'ColumnType<any>'.
     Types of property 'align' are incompatible.
     Type 'string' is not assignable to type 'AlignType'.

These are the codes below, I hope to break them down in code blocks so they can be understandable

imports

   import React, { useState, useEffect } from 'react';
   import { Table, Popconfirm, Button, Space, Input, Form } from 'antd';   
   import { isEmpty } from 'lodash';

api

    const apiUrl = 'api/terminals';

useState and useEffect codes

    const [gridData, setGridData] = useState([]);
    const [loader, setLoader] = useState(false);
    const [editingKey, setEditingKey] = useState('');
    const [editRow, setEditRow] = useState(false);
    const [form] = Form.useForm();

    useEffect(() => {
    loadData();
     }, []);

   const loadData = async () => {
   setLoader(true);
   const response = await axios.get(apiUrl);
   setGridData(response.data);
   setLoader(false);
     };

modifiedData codes

     const modifiedData = gridData.map(({ ...item }) => ({
     ...item,
     key: item.id,
     }));
    const save = async key => {
    try {
    const row = await form.validateFields();
    const newData = [...modifiedData];
    const index = newData.findIndex(item => key === item.key);
    if (index > -1) {
    const item = newData[index];
    newData.splice(index, 1, { ...item, ...row });
    setGridData(newData);
    setEditingKey('');
     }
    } catch (error) {
    console.warn('Error', error);
    }
    };

edit and cancel function code block

       const edit = record => {
       form.setFieldsValue({
       name: '',
       stock: '',
       stockLevelDate: '',
       tankThreatLevel: '',
       tankThreatLevelColor: '',
       tankTopPosition: '',
       tankTopPositionColor: '',
       lowPumpable: '',
       lowPumpableColor: '',
       tankCapacity: '',
       ...record,
       });
       setEditingKey(record.key);
       };
      const cancel = () => {
      setEditingKey('');
      };

editableCell function block

      const EditableCell = ({ editing, dataIndex, title, record, children, ...restProps }) => 
    {
     const input = <Input />;
     return (
     <td {...restProps}>
      {editing ? (
      <Form.Item
        name={dataIndex}
        style={{ margin: 0 }}
        rules={[
          {
            required: true,
            message: `Please input ${title}`,
          },
        ]}
        >
        {input}
       </Form.Item>
       ) : (
      children
      )}
      </td>
      );
      };

editing code block

      const isEditing = record => {
     return record.key === editingKey;
     };

columns block

       const columns = [
        {
       title: 'ID',
       dataIndex: 'id',
       key: 'id',
        },
       {
      title: 'Name' as string,
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      editable: true,
      },
      {
     title: 'Stock',
     dataIndex: 'stock',
      key: 'stock',
     align: 'center',
      editable: true,
      },
     {
     title: 'Stock Level Date',
     dataIndex: 'stockLevelDate',
      key: 'stockLevelDate',
      align: 'center',
      editable: true,
     },
    {
    title: 'Tank Threat Level',
    dataIndex: 'tankThreatLevel',
    key: 'tankThreatLevel',
    align: 'center',
    editable: true,
    },
    {
    title: 'Tank Threat Level Color',
    dataIndex: 'tankThreatLevelColor',
    key: 'tankThreatLevelColor',
    align: 'center',
    editable: true,
    },
    {
    title: 'Tank Top Position',
    dataIndex: 'tankTopPosition',
    key: 'tankTopPosition',
    align: 'center',
    editable: true,
    },
    {
    title: 'Tank Top Position Color',
    dataIndex: 'tankTopPositionColor',
    key: 'tankTopPositionColor',
    align: 'center',
    editable: true,
    },
    {
    title: 'Low Pumpable',
    dataIndex: 'lowPumpable',
    key: 'lowPumpable',
    align: 'center',
    editable: true,
    },
    {
    title: 'Low Pumpable Color',
    dataIndex: 'lowPumpableColor',
    key: 'lowPumpableColor',
    align: 'center',
    editable: true,
    },
     {
    title: 'Tank Capacity',
    dataIndex: 'tankCapacity',
    key: 'tankCapacity',
    align: 'center',
    editable: true,
    },
     {
     title: 'Actions',
     dataIndex: 'actions',
     key: 'actions',
     align: 'center',
     render: (_, record) => {
     const editable = isEditing(record);
     return modifiedData.length >= 1 ? (
      <Space>
        <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record)}>
          <Button type="primary" disabled={editable} danger>
            Delete
          </Button>
        </Popconfirm>
        {editable ? (
          <span>
            <Space size="middle">
              <Button onClick={e => save(record.key)} type="primary" style={{ marginRight: 8 
               }}>
                {' '}
                Save
              </Button>
              <Popconfirm title="Sure to cancel?" onConfirm={cancel}>
                <Button>Cancel</Button>
              </Popconfirm>
            </Space>
          </span>
         ) : (
          <Button onClick={() => edit(record)} type="primary">
            Edit
          </Button>
         )}
        </Space>
        ) : null;
         },
         },
         ];

mergedCoulumns block

       const mergedColumns = columns.map(col => {
      if (!col.editable) {
       return col;
        }
       return {
       ...col,
       onCell: record => ({
       record,
       dataIndex: col.dataIndex,
       title: col.title,
       editing: isEditing(record),
       }),
       };
       });

handleDelete code block

         const handleDelete = value => {
     const dataSource = [...modifiedData];
      const filteredData = dataSource.filter(item => item.id !== value.id);
     setGridData(filteredData);
      };

return jsx

      <>
      <div>
      <h2>Terminals</h2>
      <Link to={`${match.url}/new`} className="btn btn-primary jh-create-entity" id="jh       
     -create- 
     entity" data-cy="entityCreateButton">
      <FontAwesomeIcon icon="plus" />
      &nbsp; Add Terminal
     </Link>

      <hr color="red" />
      <Form form={form} component={false}>
        <Table
        components={{
          body: {
            cell: EditableCell,
          },
        }}
        columns={mergedColumns}
        dataSource={modifiedData}
        bordered
        loading={loader}
       />
        </Form>
       </div>
      </>

Thanks in anticipation