pagination with ant design not updating the limit - pagination

Question

I am trying to make a pagination table using an ant table. but I am not getting the result I want. I am always getting a limited number of data. can't really update the data limit dynamically. what i am doing wrong here? I am hardcoded the limit here how to do it dynamically ?? how can i fetch the data from data base i can show only 20 data on each page. also i have to show the available buttons
backend
export const getJourneyDetails = async (req, res) => {
try {
const page = parseInt(req.query.page || 1);
const perPage = parseInt(req.query.perPage || 100);
const search = req.query.search || "";
let JourneyDetails = await journey_details
.find({
Departure_Station_Name: { $regex: search, $options: "i" },
})
.skip((page - 1) * perPage)
.limit(perPage);
if (!JourneyDetails.length) {
JourneyDetails = await journey_details.find().limit(perPage);
}
const totalpages = Math.ceil(
(await journey_details.countDocuments()) / perPage
);
res.status(200).json({ JourneyDetails, totalpages });
frontend
import { CircularProgress } from "#mui/material";
import { useEffect, useState } from "react";
import type { ColumnsType } from "antd/es/table";
import { Table } from "antd";
import axios from "axios";
interface JourneyDetail {
Departure_time: String;
Return_time: String;
Departure_Station_Id: number;
Departure_Station_Name: String;
Return_Station_Id: number;
Return_Station_Name: String;
Distance: number;
Duration: number;
}
const JourneyData: React.FC = () => {
const [journeyDetails, setJourneyDetails] = useState<JourneyDetail[]>([]);
const [totalPages, setTotalPages] = useState(1);
const [searchQuery, setSearchQuery] = useState("");
const fetchData = async (page: number) => {
const { data } = await axios.get(
`https://helisinkicitybike.onrender.com/home/journey/?page=${page}&perPage=20&search=${searchQuery}
`
);
setJourneyDetails(data.JourneyDetails);
setTotalPages(data.totalPages);
};
useEffect(() => {
fetchData(1);
}, [searchQuery]);
const columns: ColumnsType<JourneyDetail> = [
{
title: "Departure time",
dataIndex: "Departure_time",
width: 100,
fixed: "left",
},
{
title: "Departure Station Name",
dataIndex: "Departure_Station_Name",
width: 100,
fixed: "left",
},
{
title: "Return time",
dataIndex: "Return_time",
width: 100,
fixed: "left",
},
{
title: "Return Station Name ",
dataIndex: "Return_Station_Name",
width: 100,
fixed: "left",
},
{
title: " Distance ",
dataIndex: "Distance",
width: 100,
fixed: "left",
},
{
title: "Duration ",
dataIndex: "Duration",
width: 100,
fixed: "left",
},
];
if (!journeyDetails) return <CircularProgress />;
return (
<div className="container mt-5">
<div className="input-group mb-3">
<span className="input-group-text" id="inputGroup-sizing-default">
Search
</span>
<input
placeholder=" Enter Station Name"
type="text"
className="form-control"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default"
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<Table
columns={columns}
dataSource={journeyDetails}
pagination={{
pageSize: 10,
total: totalPages,
onChange: (page) => {
fetchData(page);
},
}}
/>
<p style={{ fontSize: "10px", marginTop: "5px" }}>
#Data source Helsinki City Bike, covers the period of May to July 2021.
</p>
</div>
);
};
export default JourneyData;
} catch (error) {
console.error(error);
res.status(500).json({ message: "Error retrieving Journey Details" });
}
};