I am writing the react-table getting started with javascript, however I am getting an error on the data I am passing into my table function:

tableee.js:25 Uncaught TypeError: headerGroup.map is not a function

at tableee.js:25:1

at Array.map ()

at Tableee (tableee.js:23:1)

at renderWithHooks (react-dom.development.js:16305:1)

at mountIndeterminateComponent (react-dom.development.js:20074:1)

at beginWork (react-dom.development.js:21587:1)

at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

at invokeGuardedCallback (react-dom.development.js:4277:1)

at beginWork$1 (react-dom.development.js:27451:1)

Tablee.js

import React, { useMemo } from "react";
import { useTable } from "react-table";
import MOCK_DATA from "./MOCK_DATA.json";
import { COLUMNS } from "./columns";
import "./tableee.css";

const Tableee = () => {
  const columns = useMemo(() => COLUMNS, []);
  const data = useMemo(() => MOCK_DATA, []);
  const tableInstance = useTable({
    columns: columns,
    data: data,
  });
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = tableInstance;
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default Tableee;

columns.js

export const COLUMNS = [
  {
    Header: "No",
    accessor: "_id",
  },
  {
    Header: "Project Name",
    accessor: "Project_name",
  },
  {
    Header: "Customer Name",
    accessor: "customer_name",
  },
  {
    Header: "Status",
    accessor: "status",
  },
  {
    Header: "Archived",
    accessor: "archived",
  },
];

Please help me out