Single spa routing issues

Question

I am trying to run multiple frontends (angularjs and react) using single spa. I have successfully ran both react frontend and angularjs when I set the activeWhen property to ("/"). However when I try to change it for the react app for example to be active on route /reactApp, I am getting this error: No webpage was found for the web address: http://localhost:8080/reactApp.

    <script>
  System.import("single-spa").then(function (singleSpa) {
    window.singleSpa = singleSpa;
    window.singleSpa.registerApplication({
      name: "legacyAngularApp",
      app: () => System.import("@app/legacyAngularApp"),
      activeWhen: ["#/"],
    });

    window.singleSpa.registerApplication({
      name: "reactApp",
      app: () => System.import("@app/reactApp"),
      activeWhen: ["/reactApp"],
    });

    window.singleSpa.start();
  });
</script>

here is my react routing configuration:

const Router = () => {
  const pageRoutes = pagesData.map(
    ({ path, title, component, type }: routerType) => {

      return (
        <Route
          key={title}
          path={`/${path}`}
          element={<RequireAuth type={type}>{component}</RequireAuth>}
        />
      );
    }
  );

  return (
    <AuthProvider>
      <Routes>
        <Route element={<Layout />}>{pageRoutes}</Route>
        <Route
          path="/login"
          element={
            <NoAuth>
              <Login />
            </NoAuth>
          }
        />
      </Routes>
    </AuthProvider>
  );
};

export default Router;

and the pagesData:

    const pagesData: routerType[] = [
  {
    path: "reactApp",
    component: <Home />,
    title: "home",
  },
];

export default pagesData;