How to add base url dynamically in single-spa-router in react app

Question

We are using Single Spa Micro Front end for our react app to load the pages from multiple front ends. I would like to load a base URL from an env variable in microfrontend-layout.html

Our microfrontend-layout.html looks like this.

<single-spa-router base="@basePath"> 
  <main style="display: flex; justify-content: center;">
    <route default>
      <h1>404 route not defined</h1>
    </route>

    <route path="/login">
          <application  name="@login"></application>
    </route>

    <route path="/dashboard">
          <application  name="@dashboard"></application>
    </route>
</main>
</single-spa-router>

And our index.ejs import looks like this.

<% if (isLocal) { %>
    <script type="systemjs-importmap">
      {
        "imports": {
            
            "@root-config": "HTTP://someurl",
            "@login": "someurl",
            "@dasboard": "someurl",
            "@basePath": ''
        }
    }
    </script>
    <% } %>

Now, I want to add a base URL dynamically. So I tried to add that in an imports of index.ejs and read it in the HTML file which is not working.

My requirement is reading a value from an environment .env file and assigning that to the base attribute in microfrontend-layout.html. Since I cannot read the environment variable in the HTML file, I thought of reading that from the index.ejs file.

Please guide me on the right way to achieve this.