Best way to render dynamic sitemap - react

I am a beginner in react and I have made a portfolio website using react frontend.

I wanted to add a dynamic sitemap to the application and almost tried every possible way given on youtube, stackoverflow and google. But, I couldn't do what I wanted like if I add a new portfolio, it will not be there in the sitemap.

Things I already tried:-

• At first, I added a sitemap.xml file in the public folder with all static contents but there was the same problem, I had to build whole application everytime I add a portfolio and also I will have to manually change the sitemap.
• I also tried react-snap and react-snap-sitemap together which mostly worked but then, for some pages, I don't know why but the css stopped working. Mostly it happened with the pages which I didn't want in the sitemap or I didn't want them to be crawled.
• Then, I also tried a way where there was a sitemap-generator.js which we would have to run to create a sitemap.xml file in the build folder, but then, we would have to build it again and again, and a bigger issue was that it used babel scripts which was giving errors.
• Then I finally found out react-dynamic-sitemap which works almost perfectly but the issue is that it is rendering the component Sitemap and not a file sitemap.xml.
  So, the xml content is displayed as text.
  I also found out ways to display it as xml content but I was unable to do so.
  I assume that this sitemap could not be submitted to google and also, this is not working as purely dynamic.
  Because, for the portfolio details pages, I have to pass slugs in the slugs parameter like this: [{id: "foo"}, {id: "bar"}]. I tried to bring these from the database but even if I use .then() and then load the Routes after the portfolios data is fetched from the server, it gives error as it has to be loaded in other Sitemap component till then.

Code for react-dynamic-sitemap:-

Sitemap.js

import React from "react";
import Routes from "./Routes";
import DynamicSitemap from "react-dynamic-sitemap";

export default function Sitemap(props) {
    return (
        <DynamicSitemap routes={Routes} prettify={true} {...props}/>
    );
}

Routes.js

import React, { useContext, useEffect, useState } from 'react';
import { Route, Routes } from 'react-router-dom';

import { Portfolio } from './PortfolioComponent/Portfolio';
import { PortfolioDetail } from './PortfolioDetailComponent/PortfolioDetail';
import Sitemap from './Sitemap';

const MyRoutes = () => {
    return (
        <Routes>
            ...Other Static Routes...
            <Route
                path="/portfolio"
                element={<Portfolio />}
                sitemapIndex='true'
                changefreq='weekly'
                priority='1'
            />
            <Route
                path="/portfolio/:slug"
                element={<PortfolioDetail />}
                sitemapIndex='true'
                changefreq='weekly'
                priority='1'
                slugs={[Objects of the slugs of different portfolios have to written staticly]}
            />
            <Route path="/sitemap" element={<Sitemap />}></Route>
        </Routes>
    )
}

export default MyRoutes;

Can someone please answer these points, and end the issue for all React developers:-

• What is the best way to generate sitemaps staticly in react, as many solutions say to use nextjs or to use online sitemaps generator
• If no other way possible, how can we render react-dynamic-sitemap content as xml