Deploying a react-router-dom build into a domain subfolder in cpanel resulted in white screen, not running react-router-dom

Question

As title says, I get a white screen on my cpanel domain, with no errors caught in either local or browser terminals.

Any idea how to fix this?

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Linkedin Clone!</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>

package.json

{
  "name": "linkedin-clone",
  "homepage": "https://aitalent.net/linkedinjunior",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "antd": "^5.2.1",
    "firebase": "^9.20.0",
    "firebase-tools": "^11.24.0",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "moment": "^2.29.4",
    "quill-emoji": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-google-button": "^0.7.2",
    "react-icons": "^4.7.1",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.8.1",
    "react-toastify": "^9.1.1",
    "react-uuid": "^2.0.0",
    "sass": "^1.58.2",
    "sort-by": "^1.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }
}

src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./Routes";
import { app, auth } from "./firebaseConfig";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "react-quill/dist/quill.snow.css";
import "./index.scss";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
    <ToastContainer />
  </React.StrictMode>
);

src/Routes/index.jsx

import { createHashRouter } from "react-router-dom";
import Login from "../Pages/Login";
import Register from "../Pages/Register";
import HomeLayout from "../layouts/HomeLayout";
import ProfileLayout from "../layouts/ProfileLayout";
import ConnectionLayout from "../layouts/ConnectionLayout";

export const router = createHashRouter([
  {
    path: "/",
    element: <Login />,
  },
  {
    path: "/register",
    element: <Register />,
  },
  {
    path: "/home",
    element: <HomeLayout />,
  },
  {
    path: "/profile",
    element: <ProfileLayout />,
  },
  {
    path: "/connections",
    element: <ConnectionLayout />,
  },
]);

src/Pages/Login.jsx (The intended default landing page)

import React, { useEffect, useState } from "react";
import LoginComponent from "../components/LoginComponent";
import { onAuthStateChanged } from "firebase/auth";
import { useNavigate } from "react-router-dom";
import { auth } from "../firebaseConfig";
import Loader from "../components/common/Loader";

export default function Login() {
  const [loading, setLoading] = useState(true);
  let navigate = useNavigate();
  useEffect(() => {
    onAuthStateChanged(auth, (res) => {
      if (res?.accessToken) {
        navigate("/home");
      } else {
        setLoading(false);
      }
    });
  }, []);
  return loading ? <Loader /> : <LoginComponent />;
}

"dist" folder created from running "npm run build"

dist/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Linkedin Clone!</title>
  <script type="module" crossorigin src="/assets/index-af1976e4.js"></script>
  <link rel="stylesheet" href="/assets/index-98b7a85d.css">
</head>

<body>
  <div id="root"></div>
  
</body>

</html>

Expected result

Actual result

I provided a lot of files for anybody to help troubleshoot these issues so that anybody in the future seeking similar help might be able to deal with the "White Screen" curse from deploying a React build.

I hope a solution comes soon.

How to deploy a react app on cPanel?

How to fix the white screen after build with create-react-app?

htaccess for React app using React router hosted on cpanel

I ma getting the white screen after deploying the react app in the azure

Blank page after running build on create-react-app

I read the above questions and I still can't figure out the solution for my problem yet.