My React App is not showing in the Browser

I am new to react, and this is my first big project. When, I run my react app in vs code, everything works, but the app doesn’t appear in the browser, and I am not getting any error in my terminal or the browser console. My react application just doesn’t appear in the browser, and all the link paths show a dark screen. My webpack was compiled successfully and I can’t find the error.

Here is my App.js file:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Browse, Home, Signin, Signup } from './pages';
import * as ROUTES from './constants/routes';
import {IsUserRedirect, ProtectedRoute} from './helpers/routes';

import { useAuthListener } from './hooks';




function App() {

  const { user } = useAuthListener();

  return (
    <>
    <Router>
      
        <Routes>

            <Route path="/signin/*" element ={
              <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE} path={ROUTES.SIGN_IN}>
                  <Signin />
              </IsUserRedirect>

            }/> 
         
            <Route path="/signup/*" element ={
              <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE} path={ROUTES.SIGN_UP}>
                <Signup />
              </IsUserRedirect>
            }/>


            <Route path="/browse" element={
              <ProtectedRoute user={user} path={ROUTES.BROWSE}>
                <Browse />
              </ProtectedRoute>
            }/>


            <Route path="/home" element={
              <IsUserRedirect user={user} loggedInPath={ROUTES.BROWSE} path={ROUTES.HOME}>
                <Home />
              </IsUserRedirect>
            }/>

        </Routes>
      </Router>   
    </>
  );

}



export default App;

Here is my routes.js file from ‘./constant/route’.

export const HOME = '/';
export const BROWSE = '/browse';
export const SIGN_UP = '/signup';
export const SIGN_IN = '/signin';

Here is my routes.js file from ‘./helpers/routes’.

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';

export function IsUserRedirect({ user, loggedInPath, children, ...rest }) {

  return (

    
      <Routes>

        <Route
          {...rest}
          render={() => {
            if (!user) {
              return children;
            }

            if (user) {
              return (
                <Navigate
                  to={{
                    pathname: loggedInPath,
                  }}
                />
              );
            }
            
            return null;
          }}
        />

      </Routes>
     
  );
}
 
export function ProtectedRoute({ user, children, ...rest }) {

  return (

    

      <Routes>

      
        <Route
          {...rest}
          render={({ location }) => {
            if (user) {
              return children;
            }
            
            if (!user) {
              return (
                <Navigate
                  to={{
                    pathname: 'signin',
                    state: { from: location },
                  }}
                />
              );
            }
            return null;
          }}
        />
        
      </Routes>
    

  );
}

Instead of a dark screen, Why is my react app not showing in the browser?