REACT-Display content of my json file but get only the header

The JSON data is an object:

{
  "menus": [
    {
      "id": "Menu1",
      "title": "Creamy pea soup topped with melted cheese and sourdough croutons.",
      "price": 4,
      "invited": [
        {
          "name": "Jose Luis",
          "location": "LA"
        },
        {
          "name": "Smith",
          "location": "New York"
        },
      ],    
    },
    ...
  ]
}

...

import JsonData from "./menus.json";

...

const { menus } = JsonData;

The accessor property isn't correct.

Column Options

• accessor: String | Function(originalRow, rowIndex) => any
  • Required
  • This string/function is used to build the data model for your column.
  • The data returned by an accessor should be primitive and sortable.
  • If a string is passed, the column's value will be looked up on the original row via that key, eg. If your column's accessor is firstName then its value would be read from row['firstName']. You can also specify deeply nested values with accessors like info.hobbies or even address[0].street
  • If a function is passed, the column's value will be looked up on the original row using this accessor function, eg. If your column's accessor is row => row.firstName, then its value would be determined by passing the row to this function and using the resulting value.
  • Technically speaking, this field isn't required if you have a unique id for a column. This is used for things like expander or row selection columns. Warning: Only omit accessor if you really know what you're doing.

Use stingified accessors

const data = useMemo(
  () => [
    {
      Header: "Id",
      accessor: "id"
    },
    {
      Header: "Title",
      accessor: "title"
    },
    {
      Header: "Invited",
      accessor: "invited[0].name" // because invited is an array
    },
    {
      Header: "Price",
      accessor: "price"
    }
  ],
  []
);

Or use a function

const data = useMemo(
  () => [
    {
      Header: "Id",
      accessor: row => row.id
    },
    {
      Header: "Title",
      accessor: row => row.title
    },
    {
      Header: "Invited",
      accessor: row => row.invited[0].name
    },
    {
      Header: "Price",
      accessor: row => row.price
    }
  ],
  []
);