Nextjs dynamic sitemaps not working on production server

Nextjs dynamic sitemaps working on localhost but getting 500 Internal Server Error on production server. This url worked on http://localhost:3000/server-sitemap.xml but I am not understanding why it's not working on production https://www.example.com/server-sitemap.xml

here is my code: my index.tsx folder structure is pages>server-sitemap.xml>index.tsx

index.tsx

import { GetServerSideProps } from "next";
import { getServerSideSitemap, ISitemapField } from "next-sitemap";

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const response = await fetch("https://backendapi.farhyn.com/blog-list/");
  const data: any[] = await response.json();

  const fields: ISitemapField[] = data.map((blog) => ({
    loc: `https://www.farhyn.com/blog/${(blog.blog_slug)}`,
    lastmod: new Date().toISOString(),
  }));

  return getServerSideSitemap(ctx, fields);
};

export default function Site() {}