Database update functionality works locally but doesnt on vercel deployement. This bug only happens in the Car Page

Question

I have a website about cars. The tech stack is typescript, preact, astro, vercel, and supabase. The current logic is if there are values for attributes like price, range, etc in the database then the website will use the value from the database, else the data from the supplier(API). This works perfectly across all the pages locally. But in the vercel branch deployment this doesnt work in the specifically in the car page, but it works perfectly in other pages(compare, browse). The data from the database are displayed everywhere exceept the car page. But in local environment the data from the database is displayed perfectly in the car page as well.

The data in the car page only updates with the latest data before the push to the branch.(i.e. the page updates with the data from the database just before the push.)

  <CarPage
    client:load
    vendor={{
      name: 'default',
      ids: [],
      cars: cars,
    }}
    id={id}
    name={name}
    description={carDescription}
  />

Previously I had used the client:only="preact", I updated it to client:load in hopes it will fetch the data dynamically for the car page as well but this didnt work.