single-page-application routing is not working after deploying to s3 bucket

Question

Root application and other MFE's are deployed to s3 bucket. I am able to load the first page ("/") of the application, but if I navigate to other page it throws error not found. I have used microfrontend-layout to define the single-spa-router

Microfrontend-layout.html

  <application name="@TEST/app1"></application>
  <main>
    <route path="/" exact>
      <application name="@TEST/app2"></application>
    </route>
    <route path="/contact">
      <application name="@TEST/app3"></application>
    </route>
    <route path="/angular">
      <application name="angular-app"></application>
    </route>
    <route path="/mfe1">
      <application name="@TEST/mfe1"></application>
    </route>
    <route path="/app4">
      <application name="@TEST/app4"></application>
    </route>
    <route default>
      <h1>404 Not Found</h1>
      <application name="@TEST/"></application>
    </route>
  </main>
</single-spa-router>

Route-config.js

import { registerApplication, start } from "single-spa";
import * as singleSpa from 'single-spa';
import {
  constructApplications,
  constructRoutes,
  constructLayoutEngine,
} from "single-spa-layout";
import microfrontendLayout from "./microfrontend-layout.html";

const routes = constructRoutes(microfrontendLayout);
const applications = constructApplications({
  routes,
  loadApp({ name }) {
    return System.import(name);
  },
});
const layoutEngine = constructLayoutEngine({ routes, applications });

applications.forEach(registerApplication);

layoutEngine.activate();

start();

I am running yarn run build to create my "dist" folder and upload it in the bucket manually without any .yml file/pipeline.

I guess the route is not working when deployed.

Locally it is working perfectly.

Is there anything that needs to be added before deployment?

this is my folder structure