Im doing a custom page for showing a list of elements using the logics displayed at: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination

As far this is all good... on dev at my local. Then on prod (deployed) is just not working. Here is my code:

page.tsx

export default async function BrowsePage({
  searchParams
}: {
  searchParams?: Record<string, string>;
}) {
  return (
    <MainLayout>
      <div>
        <section className="relative mt-[0.5rem]">
          <div className="container lg:my-2 relative z-1">
            <SearchBar />
          </div>
        </section>
        <section className="container pb-12 md:pb-20 lg:pb-32">
          <Suspense
            key={JSON.stringify(searchParams)}
            fallback={<p>Loading...</p>}>
            <OffersList searchParams={searchParams} />
          </Suspense>
        </section>
      </div>
    </MainLayout>
  );
}

In the page im wrapping the listing render component with a suspense setting a key and a basic callback.

offer_list

export default async function OffersList({
  searchParams
}: {
  searchParams?: Record<string, string>;
}) {
  const searchResults = await getCattle(searchParams);

  return (
    <div>
      {searchResults?.found && searchResults?.found > 0 ? (
        <BrowseListingList
          browseListings={
            searchResults?.hits?.map((h) => h.document as BrowseListing) ?? []
          }
        />
      ) : (
        <Empty />
      )}
      {searchResults?.found && searchResults?.found > 0 ? (
        <Paginator allItems={searchResults.found} itemsPerPage={25} />
      ) : null}
    </div>
  );
}

Here is where I make the fetch and render depending on the results. The envs used at the fetch function are all good cause it was working before I moved to this structure.

I honestly don't know what im doing wrong here