NextUI.Org - Sorting tables

Question

I'm using nextui.org table templates and having some issues while loading the data going to my app. Based on the given sample:

import { Table, useAsyncList, useCollator } from "@nextui-org/react";

export default function App() {
  const collator = useCollator({ numeric: true });
  async function load({ signal }) {
    const res = await fetch("https://swapi.py4e.com/api/people/?search", {
      signal,
    });
    const json = await res.json();
    return {
      items: json.results,
    };
  }
  async function sort({ items, sortDescriptor }) {
    return {
      items: items.sort((a, b) => {
        let first = a[sortDescriptor.column];
        let second = b[sortDescriptor.column];
        let cmp = collator.compare(first, second);
        if (sortDescriptor.direction === "descending") {
          cmp *= -1;
        }
        return cmp;
      }),
    };
  }
  const list = useAsyncList({ load, sort });
  return (
    <Table
      aria-label="Example static collection table"
      css={{ minWidth: "100%", height: "calc($space$14 * 10)" }}
      sortDescriptor={list.sortDescriptor}
      onSortChange={list.sort}
    >
      <Table.Header>
        <Table.Column key="name" allowsSorting>
          Name
        </Table.Column>
        <Table.Column key="height" allowsSorting>
          Height
        </Table.Column>
        <Table.Column key="mass" allowsSorting>
          Mass
        </Table.Column>
        <Table.Column key="birth_year" allowsSorting>
          Birth Year
        </Table.Column>
      </Table.Header>
      <Table.Body items={list.items} loadingState={list.loadingState}>
        {(item) => (
          <Table.Row key={item.name}>
            {(columnKey) => <Table.Cell>{item[columnKey]}</Table.Cell>}
          </Table.Row>
        )}
      </Table.Body>
    </Table>
  );
}

Using the same code, it's working without any issues; however, when I tried to modified it using my own there's no data showing.

First, I created a useState function to store the data from my database.

const [ storedData, setStoredData ] = useState([]);

fetch(`${process.env.API_GCP_URL}/samples/get-all-samples-by-month`, {
    method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            dateAdded: d.yyyy() + "-" + d.MM()
    })
}).then(res => res.json()).then(evaluationExtractedDatas => {
    setStoredData(evaluationExtractedDatas)
})

The data that I needed were stored without any issues. So, now I tried to convert it to the same code.

const collator = useCollator({ numeric: true });

async function sort({ items, sortDescriptor }) {
return {
  items: items.sort((a, b) => {
    let first = a[sortDescriptor.column];
    let second = b[sortDescriptor.column];
    let cmp = collator.compare(first, second);
    if (sortDescriptor.direction === "descending") {
      cmp *= -1;
    }
    return cmp;
  }),
};
}

const list = useAsyncList({ storedData, sort });

return(
<Table id="table-to-xls" aria-label="Evaluation Table" css={{ minWidth: "100%" }} sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
      <Table.Header>
        <Table.Column key="_id" allowsSorting>
          Reference ID
        </Table.Column>
        <Table.Column key="department" allowsSorting>
          Designation
        </Table.Column>
        <Table.Column key="agentName" allowsSorting>
          Agent Name
        </Table.Column>
        <Table.Column key="orderNo" allowsSorting>
          Order No
        </Table.Column>
      </Table.Header>
      <Table.Body items={list.items} loadingState={list.loadingState}>
        {(item) => (
          <Table.Row key={item._id}>
            {(columnKey) => <Table.Cell>{item[columnKey]}</Table.Cell>}
          </Table.Row>
        )}
      </Table.Body>
    </Table>
)

You will notice that I have converted load to storedData. What I'm wondering why the data is not appearing on my app. It just a blank table with header.