How to generate sitemap for pages generated dynamically in React.js

My backend is in django. I can get post data from there and also post list.

In reactjs, I am just displaying post details and lists (and some more details related to posts...)

In reactjs my index.js file is as below

import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import React from "react";
import { BrowserRouter } from "react-router-dom";
import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";

ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
  document.getElementById("root"),
);

serviceWorker.unregister();

My app.js file is as below

import React from "react";
import { Route, Switch } from "react-router-dom";
import HomePage from "./pages/HomePage";
import BlogPage from "./pages/BlogPage";
import "./css/styles.css";
import CategoryPostsPage from "./pages/CategoryPostsPage";
import SearchPage from "./pages/SearchPage";
import ContactPage from "./pages/ContactPage";

function App() {
  return (
    <main>
      <Switch>
        <Route path="/post/:slug/" component={BlogPage} />
        <Route
          path="/category/:slug/"
          component={CategoryPostsPage}
        />
        <Route
          path="/query/:query/"
          component={SearchPage}
        />
        <Route path="/contact/" component={ContactPage} />
        <Route path="/" component={HomePage} />
      </Switch>
    </main>
  );
}

export default App;

I add new posts from backend (django admin panel). And through API, react app gets data from backend.

I want to have all urls like /post/some-slug /post/some-slug-2 ... / /contact/ ...

This is for SEO purpose, When I search, it displays only homepage url and contact page url, not a single url for any post...

Please suggest, what should I do, I have tried sitemap packages from npm, but doesn't seem working...