Data is not updating even when refreshing the page in deployment even tho everything work well in local

[LinThitHtwe]

Summary

I have a small project using supabase.
It have a download count that will increase . The download count increase in the detail page but not in the list page in deployment even when the page is refresh. But everything work okay in local.
I cannot seem to be able to solve it , it has never happened to me before and cannot seem to find other facing the same issue. Is there something that I didn't know about NextJs in deployment ?
I deployed in on vercel and also used TanStack Query for that. Here is my code for example

const {
    data: sheetLists,
    isLoading,
    isError,
  } = useFetchData<SheetResponse[]>({
    queryKey: ["sheets"],
    apiFunction: () => getSheets(),
  });

//this is how I fetch the data and this is the setup of hook

import { useQuery, QueryKey, UseQueryOptions } from "react-query";

interface UseFetchDataArgs<T> {
  queryKey: QueryKey;
  apiFunction: (...args: any[]) => Promise<{ data: T }>;
  options?: UseQueryOptions<T>;
}

const fetchData = async <T>(
  apiFunction: (...args: any[]) => Promise<{ data: T }>,
) => {
  const response = await apiFunction();
  return response.data;
};

const useFetchData = <T>({
  queryKey,
  apiFunction,
  options = {},
}: UseFetchDataArgs<T>) => {
  return useQuery<T>(queryKey, () => fetchData(apiFunction), {
    ...options,
  });
};

export default useFetchData;

I did also notice that when I inspect the responses, the api is responsed with 304 Not Modified.

Additional information

No response

Example

No response