Как исправить «Ошибка: требуется идентификатор столбца (или строковый метод доступа)!» в Nextjs.........[таблица реакций]

(https://i.stack.imgur.com/wnjIP.png) Я попытался выполнить шаги, описанные в документе с таблицей реакций (подкомпоненты), и получил ту же ошибку, даже если использовал базовую реализацию таблицы.

У меня есть данные .json таким образом

{
    "orderId": 1345123,
    "restName": "Burger House NYC",
    "restAddr": "First Street, New York",
    "clientAddr": "32nd St, New York",
    " quantity": 2
},

и колонка

const COLUMNS = [
    {
        Header: "Ordered ID",
        accessor: "orderId",
    },
    {
        Header: "Restaurant's name",
        accessor: "restName",
    },
    {
        Header: "Restaurant's address",
        accessor: "restAddr",
    },
    {
        Header: "Client's address",
        accessor: "clientAddr",
    },
    {
        Header: "Quantity",
        accessor: "quantity",
    },
];

и вот как Таблица. jsx файл выглядит так

import React, { useMemo } from "react";
import { useTable, useExpanded } from "react-table";
import ALLAVAILABLEDELIVRIES from 
"utils/data/ALLAVAILABLEDELIVRIES.json";
import COLUMNS from "./columns";

export const Table = () => {
    const columns = useMemo(() => COLUMNS, []);
    const dataList = useMemo(() => ALLAVAILABLEDELIVRIES, []);

    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, visibleColumns } =
    useTable(
        {
            columns,
            dataList,
        },
        useExpanded,
    );

// Create a function that will render our row sub components
const renderRowSubComponent = React.useCallback(
    ({ row }) => (
        <pre
            style = {{
                fontSize: "10px",
            }}
        >
            <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
        </pre>
    ),
    [],
);

return (
    <table {...getTableProps()}>
        <thead>
            {headerGroups.map((headerGroup) => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                    {headerGroup.headers.map((column) => (
                        <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                    ))}
                </tr>
            ))}
        </thead>
        <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
                prepareRow(row);
                return (
                    // Use a React.Fragment here so the table markup is still valid
                    <React.Fragment {...row.getRowProps()}>
                        <tr>
                            {row.cells.map((cell) => (
                                <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                            ))}
                        </tr>
                        {row.isExpanded ? (
                            <tr>
                                <td colSpan = {visibleColumns.length}>
                                    {renderRowSubComponent({ row })}
                                </td>
                            </tr>
                        ) : null}
                    </React.Fragment>
                );
            })}
        </tbody>
    </table>
);

};

экспорт таблицы по умолчанию;

Пожалуйста, можно ли что-то сделать, или я что-то не так делаю?