I deployed my react application on digital ocean.
It works well in my production server but after deployment an error occurs.
The error happens at the line ‘element: <ProtectedApp />.’

“react”: “^17.0.2”

“react-dom”: “^17.0.2”

“react-router-dom”: “^6.0.0-beta.0”

App.tsx

import { AppProvider } from './providers/app';
import { AppRoutes } from './routes';

export const App = () => {
  return (
    <AppProvider>
      <AppRoutes />
    </AppProvider>
  );
};

routes/index.tsx

import { Landing } from '@/features/misc';
import { useAuth } from '@/lib/auth';
import { protectedRoutes } from './protected';
import { publicRoutes } from './public';
import { useRoutes } from 'react-router-dom';

export const AppRoutes = () => {
  const { user } = useAuth();
  const commonRoutes = [{ path: '/', element: <Landing /> }];
  const routes = user ? [...protectedRoutes, ...publicRoutes] : publicRoutes;
  const element = useRoutes([...routes, ...commonRoutes]);
  return element;
};

routes/protected.tsx

import { Suspense } from 'react';
import { Spinner } from '@/components/Elements';
import { MainLayout } from '@/components/Layout';
import { lazyImport } from '@/utils/lazyImport';
import { Welcome } from '@/features/welcome/Welcome';
import { Navigate, Outlet } from 'react-router-dom';

const { TagsRoutes } = lazyImport(() => import('@/features/tags'), 'TagsRoutes');
const { CategoriesRoutes } = lazyImport(() => import('@/features/categories'), 'CategoriesRoutes');
const { CollectionsRoutes } = lazyImport(
  () => import('@/features/collections'),
  'CollectionsRoutes'
);
const { EquipmentRoutes } = lazyImport(() => import('@/features/equipment'), 'EquipmentRoutes');
const { ExercisesRoutes } = lazyImport(() => import('@/features/exercises'), 'ExercisesRoutes');
const { QuizzesRoutes } = lazyImport(() => import('@/features/quizzes'), 'QuizzesRoutes');
const { Dashboard } = lazyImport(() => import('@/features/misc'), 'Dashboard');
const { Profile } = lazyImport(() => import('@/features/users'), 'Profile');
const { UsersRoutes } = lazyImport(() => import('@/features/users'), 'UsersRoutes');

export const ProtectedApp = () => {
  return (
    <MainLayout>
      <Suspense
        fallback={
          <div className="h-full w-full flex items-center justify-center">
            <Spinner size="xl" />
          </div>
        }
      >
        <Outlet />
      </Suspense>
    </MainLayout>
  );
};

export const protectedRoutes = [
  {
    path: '/app',
    element: <ProtectedApp />,
    children: [
      { path: '/', element: <Dashboard /> },
      { path: '/intro', element: <Welcome /> },
      { path: '/tags/*', element: <TagsRoutes /> },
      { path: '/categories/*', element: <CategoriesRoutes /> },
      { path: '/collections/*', element: <CollectionsRoutes /> },
      { path: '/equipment/*', element: <EquipmentRoutes /> },
      { path: '/exercises/*', element: <ExercisesRoutes /> },
      { path: '/quizzes/*', element: <QuizzesRoutes /> },
      { path: '/users/*', element: <UsersRoutes /> },
      { path: '/profile', element: <Profile /> },
      { path: '*', element: <Navigate to="/app" /> },
    ],
  },
];

routes/index.tsx

import { Landing } from '@/features/misc';
import { useAuth } from '@/lib/auth';
import { protectedRoutes } from './protected';
import { publicRoutes } from './public';
import { useRoutes } from 'react-router-dom';

export const AppRoutes = () => {
  const { user } = useAuth();
  const commonRoutes = [{ path: '/', element: <Landing /> }];
  const routes = user ? [...protectedRoutes, ...publicRoutes] : publicRoutes;
  const element = useRoutes([...routes, ...commonRoutes]);
  return element;
};

enter image description here

I wanna run my application on digital ocean. but because of that error, I can’t.