React-table version 7 all the data appears on One page - reactjs

Question

I am trying to implement react-table
I have 750 rows and they all appear on the first page although I have controlled pagination that is telling me I am on page 1 of 68
But all the 750 rows - as I said - appear on one page .
All features are working, except for that issue.
I am fetching the data ( altogether ) from an API and sending them to the Table.
this is the code
import React from 'react';
import {
useSortBy,
useTable,
useGlobalFilter,
usePagination
} from 'react-table';
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
rows,
prepareRow,
state,
setGlobalFilter
} = useTable(
{
columns,
data
},
useGlobalFilter,
useSortBy,
usePagination
);
const { globalFilter, pageIndex, pageSize } = state;
return (
<>
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('header')}
<span>
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
</span>
</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>
<div>
<span>
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>
</span>
<span>
| Go to page
<input
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
/>
</span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[10, 25, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
{'<<'}
</button>
<button onClick={() => previousPage()} disabled={!canPreviousPage}>
Previous
</button>
<button onClick={() => nextPage()} disabled={!canNextPage}>
Next
</button>
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
{'>>'}
</button>
</div>
</>
);
}
const GlobalFilter = ({ filter, setFilter }) => {
return (
<span>
Search:{' '}
<input value={filter || ''} onChange={(e) => setFilter(e.target.value)} />
</span>
);
};
export default Table;

Answer 1

My bad
I should use page instead of rows
Like this
<tbody {...getTableBodyProps()}>
{page.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="p-2 border border-collapse"
>
{cell.render('Cell')}
</td>
);
})}
</tr>
);
})}
</tbody>