I am trying to create dynamic sitemaps for my next-js site with next-sitemap but I'm running into an issue.

I have followed the docs and created the following

//pages/server-sitemap-index.xml/index.js
import axios from "axios";
import { getServerSideSitemapIndex } from "next-sitemap";

export const getServerSideProps = async (ctx) => {
  const res = await axios(`${process.env.API_ROOT}/books`);
  const { data } = res.data;
  const fields = data.map((item) => ({
    loc: `${process.env.NEXTAUTH_URL}/${item.slug}`,
    lastmod: item.updatedAt,
    priority: 0.7,
    changefreq: "daily",
  }));

  console.log({ fields });
  return getServerSideSitemapIndex(ctx, fields);
};

export default function SitemapIndex() {}

The console.log in the above code produces(as expected)

{
  fields: [
    {
      loc: 'http://localhost:3000/The-river-between-3pgkgy',
      lastmod: '2022-03-16T16:02:06.000Z',
      priority: 0.7,
      changefreq: 'daily'
    },
    {
      loc: 'http://localhost:3000/The-river-between-0tqwkgy',
      lastmod: '2022-03-16T16:02:06.000Z',
      priority: 0.7,
      changefreq: 'daily'
    },
    {
      loc: 'http://localhost:3000/The-river-between-tqwkgy',
      lastmod: '2022-03-16T16:02:06.000Z',
      priority: 0.7,
      changefreq: 'daily'
     }
  ]
}

However, http://localhost:3000/server-sitemap-index.xml produces:

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>[object Object]</loc>
</sitemap>
<sitemap>
<loc>[object Object]</loc>
</sitemap>
<sitemap>
<loc>[object Object]</loc>
</sitemap>
</sitemapindex>

The xml is not populated properly. I am using javascript, not typescript like the examples in the docs. Could this really be the issue?

Ps: All the other sitemaps(not dynamic) come out okay.