When i go to the page, nothing shows up and i can see there is no request coming on the backend. When i refresh the page, then it starts to work afterwards

This is the next js Page

export default async function Page() {
    const searchParams = {
        adults:2, 
        children:0, 
        date:dayjs().add(3, "day").format("DD-MM-YYYY"), 
        destination:"ross_island",
        departureTime:"7:00", 
        arrivalTime:"8:00", 
        boatProvider:"xyz", 
        boatId:"1"
    }

    const postData = {
        "route": {
            "destination": "ross_island",
            // "date":  "02-07-2024" 
            "date":  dayjs().add(3, "day").format("DD-MM-YYYY")
        },
        "passenger_count": {
            "adult": 2,
            "children": 0
        }
    }

    let data = [];
    try {
        data = await getAvailabilities(postData) // api call
    } catch (error) {
        console.log(error);
    }
    
    return (
        <>
           <BoatDataMap boatData={data}/>
           <BoatRouteListing
            searchValues={searchParams}
            boatData={data}
           />
        </>
    );
}

This is the api call

import { cache } from "react";

export const getAvailabilities = cache(async (postData) => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_BASE_URL}/endpoint`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(postData)
    });
    if (!res.ok) {
        throw new Error("Failed to fetch data in getAvailabilities");
    }
    return res.json();
});

I tried by remvoing the cache but nothing happens.. still the same result