I have implemented the vercel dynamic open graph on my NextJS (using pages) app.

There are two pages index and impact. I want the impact page to have a dynamically generated OG image, based on a balance (number), and output different strings based on the amount.

So I have:
/pages/api/og/[balance].tsx for generating the ImageResponse
and
/pages/impact/[address].tsx to use it in
${process.env.NEXT_PUBLIC_VERCEL_URL}/api/og/${balance}

NEXT_PUBLIC_VERCEL_URL is set to the preview branch and follows the url structure outlined in https://vercel.com/docs/deployments/generated-urls

I can load the page and see the meta tags and og:image being generated properly (see attached imag).

In the debugger it keeps showing the generic version (the one from index page).

Can someone please light the way and tell me what's wrong?