Deploy login page with AWS amplify

The build fails when I implement the login page with AWS amplify based on the following site. https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth?file=src%2FApp.tsx,src%2Fmain.tsx

It is created with typescript and react. Below is the code we attempted to deploy with AWS Amplify. #typescript

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Routes, Navigate ,useLocation,Outlet, useNavigate} from 'react-router-dom';
import "./index.css";

const ap = {
  isAuthenticated: false,
  signin(callback: VoidFunction) {
    ap.isAuthenticated = true;
    setTimeout(callback, 100);},
  signout(callback: VoidFunction) {
    ap.isAuthenticated = false;
    setTimeout(callback, 100);},};

function AuthProvider({ children }: { children: React.ReactNode }) {
  let [user, setUser] = React.useState<any>(null);
  let signin = (newUser: string, callback: VoidFunction) => {
    return ap.signin(() => {
      setUser(newUser);
      callback();});};
  let signout = (callback: VoidFunction) => {
    return ap.signout(() => {
      setUser(null);
      callback();});};
  let value = { user, signin, signout };
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;}

interface AuthContextType {
  user: any;
  signin: (user: string, callback: VoidFunction) => void;
  signout: (callback: VoidFunction) => void;}

let AuthContext = React.createContext<AuthContextType>(null!);

function useAuth() {return React.useContext(AuthContext);}

function RequireAuth({ children }: { children: JSX.Element }) {
  let auth = useAuth();
  let location = useLocation();
  if (!auth.user) { return <Navigate to="/" state={{ from: location }} replace />;
  }return children;}

function LoginPage() {
  let navigate = useNavigate();
  let auth = useAuth();
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    let formData = new FormData(event.currentTarget);
    let username = formData.get("username") as string;
    auth.signin(username, () => {navigate("/app");});}
    return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>Username: <input name="username" type="text" /></label>{" "}
        <button type="submit">Login</button>
      </form>
    </div>);}

function AuthStatus() {
  let auth = useAuth();
  let navigate = useNavigate();
  if (!auth.user) {return <p>You are not logged in.</p>;}

  return (
    <p>Welcome {auth.user}!{" "}
      <button onClick={() => {auth.signout(() => navigate("/"));}}>Sign out</button>
    </p>);}

function App() {return <h3>Protected</h3>;}

function Layout() {return (<div><AuthStatus /><Outlet /></div>);}

ReactDOM.render(
  <React.StrictMode>
  <AuthProvider>
    <BrowserRouter>
    <Routes>
    <Route element={<Layout />}>
      <Route path="/" element={<LoginPage />} />
      <Route path="/app" element={<RequireAuth><App /></RequireAuth>}/>
    </Route>
    </Routes>
    </BrowserRouter>
  </AuthProvider>
  </React.StrictMode>,
  document.getElementById("root"));

It worked fine when I did it with "npm run start" but failed to build when I deployed with AWS Amplify.

The error message in AMPLIFY is as follows.

                                 # Starting phase: build
2022-05-27T08:52:29.916Z [INFO]: [0mAmplify AppID found: d2deeny4548uax. Amplify App name is: sample[0m
2022-05-27T08:52:29.983Z [INFO]: [0mBackend environment dev found in Amplify Console app: sample[0m
2022-05-27T08:52:30.769Z [WARNING]: - Fetching updates to backend environment: dev from the cloud.
2022-05-27T08:52:31.519Z [WARNING]: ✔ Successfully pulled backend environment dev from the cloud.
2022-05-27T08:52:31.522Z [INFO]: ✅
2022-05-27T08:52:32.737Z [INFO]: [33mNote: It is recommended to run this command from the root of your app directory[39m
2022-05-27T08:52:33.559Z [WARNING]: - Initializing your environment: dev

Sorry, but I would appreciate any advice you could give me.