Ant 设计表表分页与反应查询

Question

I am trying to add pagination on my table (ant design table component) using react query to fetch data but sometimes it works when going from page 1 to page 2 but when reaching the last page or changing the page size it doesn't work properly and i don't know why. This is the result . Here's my code.

    const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
}); //pagination state

const fetchWaitlist = (page, pageSize) => {
    return axios.get(API_URL + `tickets/waitlist?page=${page}&pageSize=${pageSize}&source=` + defaultAgency)

} //fetcher function

const {data: waitlist, refetch: refecthWaitList, isLoading} = useQuery(["waitlist", pagination.current, pagination.pageSize], () => fetchWaitlist(pagination.current, pagination.pageSize), {
    onSuccess: (data) => {
        setFilteredData(data?.data.content);
        setPagination({
            ...pagination, total: data?.data.totalElements
        }); // useQuery Hook

useEffect(() => {
    setFilteredUserData(users?.data.content);
}, [users]); //state to perform search over the table

        {!isLoading ? <Table
            components={components}//Add new Custom Cell and Row
            pagination={{
                ...pagination, showSizeChanger: true, onChange: (page, pageSize) => {
                    setPagination({current: page, pageSize: pageSize})
                }
            }}
            columns={columns} rowClassName="waitlist-table_row--shadow" rowSelection={rowSelection} rowKey="id"
            dataSource={filteredData} className="all-tickets_table" scroll={{x: "true"}}/> : <CustomLoader/>} //Table component