Uncaught TypeError: Invalid attempt to destructure non-iterable instance

Question

I'm using react-table to make a DataTable component. Here is my component's code:

const DataTable: React.FC<IDataTable<any>> = (props: IDataTable<any>) => {
  const { columns, data, className, rowSelection, onChange, ...rest } = props;
  let tableColumns: HeaderColumn<any>[] = columns;
  useMemo(() => tableColumns, [rowSelection, columns]);
  const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    state: [{ selectedRows }],
  } = useTable({ columns: tableColumns, data }, useRowSelect);
  useEffect(() => onChange && onChange(selectedRows), [selectedRows]);
  return (
    <table {...getTableProps()} className={`ods-data-table ${className}`} {...rest}>
      <thead>
        {headerGroups.map((headerGroup, index) => (
          <tr key={index}>
            {headerGroup.headers.map((column, index) => (
              <th key={index} {...column.getHeaderProps()}>
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {rows.map(
          (row, i) =>
            prepareRow(row) || (
              <tr {...row.getRowProps()} tabIndex={i} key={i}>
                {row.cells.map((cell, i) => {
                  return (
                    <td {...cell.getCellProps()} key={i}>
                      {cell.render('Cell')}
                    </td>
                  );
                })}
              </tr>
            )
        )}
      </tbody>
    </table>
  );
};

When I try to use this component and pass the data, I get this error:
"Uncaught TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method."
Here is how I'm trying to pass the data to the DataTable component.

const tableColumns: HeaderColumn<any>[] = [
  {
    Header: 'sample text',
    accessor: (object) => object.title,
  },
  {
    Header: 'sample text',
    accessor: (object) => object.price,
  },
];

const tableData = [
    {
      title: 'title1',
      price: 'price1',
    },
    {
      title: 'title2',
      price: 'price2',
    },
    {
      title: 'title3',
      price: 'price3',
    },
  ];

<DataTable columns={tableColumns} data={tableData} />

The error in the console says it is in DataTable component in this line (I'm not sure about it):

let tableColumns: HeaderColumn<any>[] = columns;

I'm using the exact component in another project and passing same data, but there isn't such error. I searched and found same questions in stackoverflow but couldn't solve the problem. Could anyone help me in this regard?
If my question is not complete or needs more info please let me know.

Answer 1

I found the line of code which throws the error and I could solve the problem.
Here in this line when I am using react-table hook (useTable):

 const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    state: [{ selectedRows }],
  } = useTable({ columns: tableColumns, data }, useRowSelect);

I changed the array to be an object and the problem is gone. Here is the final code:

 const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    state: { selectedRows },
  } = useTable({ columns: tableColumns, data }, useRowSelect);