Invalid hook call react hook, Using react-table to try and display some mock json and I don't understand what is wrong

Question

Trying to get a functioning react-table this weekend, quite frustrated. I have stripped my project down to the absolute bare bones debugging what is going on, I just don't understand why this is an invalid hook, is there a way I can get better information about what is wrong specifically or am I not reading the error correctly? Errors on running below and all my code at bottom :

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

(happens twice in console): 
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at useTable (useTable.js:65:1)
    at PopulateTable (PopulateTable.js:12: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)

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at useTable (useTable.js:65:1)
    at PopulateTable (PopulateTable.js:12: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)

react-dom.development.js:18687 The above error occurred in the <PopulateTable> component:

    at PopulateTable (http://localhost:3000/static/js/bundle.js:122:65)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at useTable (useTable.js:65:1)
    at PopulateTable (PopulateTable.js:12: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 beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)

I have a functional component PopulateTable.js:

import React, { useMemo } from 'react'
import { useTable } from 'react-table'
import DATA from './data.json'
import { COLUMNS } from './columns'



export const PopulateTable = () => {

    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => DATA, [])
    const tableInstance = useTable({ 
        columns,
        data
    })

    const { 
        getTableProps, getTableBodyProps, headerGroups, rows, prepareRow 
    } = tableInstance

    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) => {
                    prepareRow(row)
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map((cell) => {
                                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                                })}
                        </tr>
                    )
                })}
            </tbody>
        </table>
    )
};

My App.js

import './App.css';
import React, { useState, useRef, useEffect } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import { PopulateTable } from './Component/PopulateTable';


function App() {
  
  return(
    <div>
         <PopulateTable />
    </div>
  )
}

export default App;

data.json :

[
        {
            "1": {
                "itemName": "Energy research",
                "profitPerHour": 821.6746356364301
            },
            "2": {
                "itemName": "Mining research",
                "profitPerHour": 742.7240922619478
            },
            "3": {
                "itemName": "Electronics research",
                "profitPerHour": 864.3855853308221
            }
        }
]

Finally columns.js :

export const COLUMNS = [
        {
            Header: "Item Name",
            accessor: "itemName" 
        },
        {
            Header: "Profit Per Hour",
            accessor: "profitPerHour"
        }
]

What the heck am I doing wrong please all mighty stack overflow gods, I followed the link in the errors. I don't believe I am breaking any rules as far as being #1 inside functional component or #2 must have hooks at top of function.. I followed this tutorial for the structure to the T and many that are very similar... I followed the instruction to see if two react versions are conflicting, ran npm ls react from project folder. Returns one version of react and one version of react-table like I would expect. This is just about the finish line for the project I am working on, and I thought for sure I'd have it done by the end of the weekend, Not looking like it. but would be great if you knew what was going on here.

└─┬ react-table@7.8.0
  └── react@18.2.0

Answer 1

Here, we can not directly use the data.json . We have to convert it into array of objects:

  const data = useMemo(() => {
    const rawData = DATA[0];
    return Object.keys(rawData).map((key) => rawData[key]);
  }, []);

Here is the example: