Solution TLDR: Upgrade React version v18.3.1

After tinkering for a whole day, I tried to upgrade to react 18.3.1

react-app package.json file:

...
"dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "single-spa-react": "^4.3.1"
  }
...

Changed the imports for react and react-dom in root-config index.ejs file:

...
    <script type="injector-importmap">
      {
        "imports": {
          "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/es2015/esm/single-spa.min.js",
          "react": "https://ga.jspm.io/npm:[email protected]/dev.index.js",
          "react-dom": "https://ga.jspm.io/npm:[email protected]/dev.index.js"
        },
        "scopes": {
          "https://ga.jspm.io/": {
            "scheduler": "https://ga.jspm.io/npm:[email protected]/dev.index.js"
          }
        }
      }
    </script>
...

Initially I thought that it was still not working as the error message did not change. I then used the import map overrides tool to reset import map overrides and the react app immediately loaded up.

Steps to reset import map overrides:

1. Go to the root-config page at localhost:9000
2. In the browser console, run localStorage.setItem('devtools', true)
3. Refresh the page.
4. Click the small yellowish rectangle at the bottom right of the page.
5. Click "Reset all overrides" button.
6. Verify that react and react-dom is now coming from "ga.jspm.io"