Estoy escribiendo la tabla de reacción comenzando con javascript, sin embargo, recibo un error en los datos que estoy pasando a mi función de tabla:

tableee.js:25 TypeError no detectado: headerGroup.map no es una función

en tableee.js:25:1

en Array.mapa ()

en Tableee (tableee.js:23:1)

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

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

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

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

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

en invocarGuardedCallback (react-dom.development.js:4277:1)

en beginWork$1 (reaccionar-dom.desarrollo.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;

columnas.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", }, ];

Por favor, ayúdame