Dynamic routes redirect to 404 in production on Vercel

Question

I have a gatsby blog that I have hosted on Vercel. For my homepage, I am fetching dynamic content from Mongo Atlas.

I am creating dynamic rotues in Gatsby as

  createPage({
    path: '/microblog/:id',
    matchPath: '/microblog/:id',
    component: path.resolve(`./src/pages/index.jsx`),
  });

When I request for /microblog/5f3114b3e096870008336d7c on local (running with vercel now) it works but on prod you can see it redirects to 404 (https://sagark.dev/microblog/5f3114b3e096870008336d7c)

Also, if the site is fully rendered. The link works. I think the issue is to do with Vercel dynamic routing or I am missing something.