Material Table can not update

I am using Material-Table to create a table that loads data from an API that I made. When the page loads, the table properly loads and displays the data. But once I try to edit and update the data, all data gets lost and a message saying no data shows up on the table. What am I doing wrong?

My Code:

import React, { useState, useEffect } from "react";
import "./Complaints.css";
import { API } from "aws-amplify";
import MaterialTable from 'material-table';

export default function Complaints(props) {

    const [complaint, setComplaint] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [isInEditMode, setIsEditMode] = useState(false);
    const [defaultValue, setDefaultValue] = useState("");
    const [state, setState] = useState({
        columns: [
            { title: 'Customer ID', field: 'id', editable: 'never' },
            { title: 'Issue', field: 'complaintName', editable: 'never' },
            { title: 'Description', field: 'complaintDescription', editable: 'never'},
            { title: 'Order ID', field: 'complaintOrderId', editable: 'never'},
            { title: 'Submitted', field: 'createdAt', editable: 'never'},
            { title: 'Updated', field: 'updatedAt', editable: 'date'},
            { title: 'Admin Comment', field: 'adminComment', editable: 'onUpdate'},
        ],
        complaint: []
    });

    var columsArr = [
        { title: 'Customer ID', field: 'id', editable: 'never' },
        { title: 'Issue', field: 'complaintName', editable: 'never' },
        { title: 'Description', field: 'complaintDescription', editable: 'never'},
        { title: 'Order ID', field: 'complaintOrderId', editable: 'never'},
        { title: 'Submitted', field: 'createdAt', editable: 'never'},
        { title: 'Updated', field: 'updatedAt', editable: 'date'},
        { title: 'Admin Comment', field: 'adminComment', editable: 'onUpdate'},
    ];

    useEffect(() => {
        async function onLoad() {
            if (!props.isAuthenticated) {
                return;
            }

            try {
                const complaint = await loadComplaint();
                setComplaint(complaint);
                setState({
                    columns: [state.columns, ...columsArr],
                    complaint: [...state.complaint, ...complaint]
                });
                console.log(complaint)
            } catch (e) {
                alert(e);
            }

            setIsLoading(false);
        }

        onLoad();
    }, [props.isAuthenticated]);

    function loadComplaint() {
        return API.get("kleen", "/Complaint");
    }

    // function edit(adminComment) {
    //     setIsEditMode(true);
    //     setDefaultValue(adminComment);
    //     console.log("value is"+ adminComment);
    // }

    // function updateComplaint() {
    //     return API.put("kleen", `/Complaint/${props.}`);
    // }

    return (
        <MaterialTable style={{
            marginTop: "8rem",
            marginLeft: "auto",
            marginRight: "auto",
            position: "sticky",
        }}
            title="Complaints"
            columns={state.columns}
            data={state.complaint}
            editable={{
                onRowUpdate: (newData, oldData) =>
                    new Promise(resolve => {
                        setTimeout(()=> {
                            {
                                const data = state.complaint;
                                const index = data.indexOf(oldData);
                                data[index] = newData;
                                setState({data}, () => resolve());
                            }
                            resolve()
                        }, 1000)
                        })
            }}
        />
    );
}

Table before the edit:

Table after saving an edit:

Solution 1:

In case you provide the data to the table from the parent component:

state.data - data array of the table

static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.data !== state.data) {
        return {
            data: props.data,
        };
    }
    return null;
}

    render() {
    return (
        <MaterialTable
            title={<h1>All the leads</h1>}
            columns={this.state.columns}
            data={this.state.data}..........