React-table Global Filter error is not function

Question

By doing the following component I encountered the following error:

TypeError: setGlobalFilter is not a function.

The version of react-table is 7.0.0 and I followed the example but it doesn't work. I'm attaching the code that I use and that I have written.

My code:

import React from 'react';
import { useTable, useGlobalFilter } from 'react-table';

function GlobalFilter({
  preGlobalFilteredRows,
  globalFilter,
  setGlobalFilter,
  }) {

  return (
    <span>
      Search:{' '}
      <input
        value={globalFilter || ''}
        onChange={e => {

          setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
        }}
        placeholder={`records...`}
        style={{
          fontSize: '1.1rem',
          border: '0',
        }}
      />
    </span>
  )
}

The table is:

const Table = ({columns, data}) => {

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
  preGlobalFilteredRows,
  setGlobalFilter,
  state
} = useTable({
  columns,
  data,
  useGlobalFilter
})

// Render the UI for your table
return (
  <>
  <div>

</div>
  <table {...getTableProps()} className="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
    <thead>
    <tr>
            <th
              colSpan={2}
              style={{
                textAlign: 'left',
              }}
            >
              <GlobalFilter
                preGlobalFilteredRows={preGlobalFilteredRows}
                globalFilter={state.globalFilter}
                setGlobalFilter={setGlobalFilter}
              />
            </th>
          </tr>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map((row, i) => {
        prepareRow(row)
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map(cell => {
              return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            })}
          </tr>
        )
      })}
    </tbody>
  </table>
  </>
)
}

export default Table;

Why?

Answer 1

Change the code for useTable in the table file

} = useTable(
  {
   columns,
   data
  },
  useGlobalFilter
)

Further you can check this example