This is my server component rendering this page based on the id

export default async function Page({ params }: { params: { id: number } }) {
  return (
    <div className="flex flex-col justify-center items-center w-full gap-8 mt-12">
      <ClaimPage id={params.id as number} />
    </div>
  );
}

export async function generateStaticParams(): Promise<{ id: string }[]> {
  const { data, error } = await supabase
    .from("my_table")
    .select("*");
  return data!.map((d: Phygital) => ({
    id: d.cert_id.toString(),
  }));
}

type Props = {
  params: { id: number };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const id = params.id;

  const { data, error } = await supabase
    .from("my_table")
    .select("*")
    .eq("cert_id", id)
    .single();
  let openGraphFrontImage = data.image_2d_front;

  return {
    title: data?.name,
    description: `Claim page for ${data.name}`,
    openGraph: {
      title: data?.name,
      description: `Claim page for ${data.name}`,
    },
  };
}

I need to get the data.image_2d_front image url which is in my database - as I just updated but the generateMetadata function is returning null for those fields and not bringing back new columns?

Is this a cache issue or am I not doing something correctly? Any help will be greatly appreciated!!