in react metronic demo 1 theme you are using api for sorting the table, but i want to sort table here in frontend but an error is occuring, like metronic react table i am writing this code for sorting.

" const { getTableProps, getTableBodyProps, headers, rows, prepareRow } = useTable({
columns,
data,
}, useSortBy);"

here is am using useSortBy for sorting, but when i am reloading my page an error is occuring whic his saying "Maximum update depth exceeded." please help me to go out from this problem.

here is my full code for refrence
"import { useMemo, useState } from 'react';
import { useTable, ColumnInstance, Row, useSortBy } from 'react-table';
import { CustomHeaderColumn } from './columns/CustomHeaderColumn';
import { CustomRow } from './columns/CustomRow';
import { useQueryResponseData, useQueryResponseLoading } from '../core/QueryResponseProvider';
import { usersColumns } from './columns/_columns';
import { User } from '../core/_models';
import { UsersListLoading } from '../components/loading/UsersListLoading';
import { UsersListPagination } from '../components/pagination/UsersListPagination';
import { KTCardBody } from '../../../../../../_base/helpers';


const UsersTable = () => {
const users = useQueryResponseData();
const isLoading = useQueryResponseLoading();
const [currentPage, setCurrentPage] = useState<number>(1);
const usersPerPage: number = 5;
const data = useMemo(() => users, [users]);
const columns = useMemo(() => usersColumns, []);
const { getTableProps, getTableBodyProps, headers, rows, prepareRow } = useTable({
columns,
data,
},useSortBy);


const indexOfLastUser: number = currentPage * usersPerPage;
const indexOfFirstUser: number = indexOfLastUser - usersPerPage;
const currentUsers: Row<User>[] = rows.slice(indexOfFirstUser, indexOfLastUser);


const paginate = (pageNumber: number) => setCurrentPage(pageNumber);


return (
<KTCardBody className='py-4'>
<div className='table-responsive'>
<table
id='kt_table_users'
className='table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer'
{...getTableProps()}
>
<thead>
<tr className='text-start text-muted fw-bolder fs-7 text-uppercase gs-0'>
{headers.map((column: ColumnInstance<User>) => (
<CustomHeaderColumn key={column.id} column={column} />
))}
</tr>
</thead>
<tbody className='text-gray-600 fw-bold' {...getTableBodyProps()}>
{currentUsers.length > 0 ? (
currentUsers.map((row: Row<User>, i) => {
prepareRow(row);
return <CustomRow row={row} key={`row-${i}-${row.id}`} />;
})
) : (
<tr>
<td colSpan={7}>
<div className='d-flex text-center w-100 align-content-center justify-content-center'>
No matching records found
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
<UsersListPagination paginate={paginate} currentPage={currentPage} usersPerPage={usersPerPage} totalUsers={rows.length} />
{isLoading && <UsersListLoading />}
</KTCardBody>
);
};


export { UsersTable };"