My react project isn't displaying anything even though I have my components

Question

Title: React Webpage with MongoDB Not Displaying LoginPage

Question:

I'm working on a React project that uses MongoDB for data storage and Nodemon to run the server. My current issue is with the navigation bar; it's supposed to display the LoginPage when the server is up, but it's not appearing. Despite creating dummy data and checking the DOM, I can't pinpoint the problem. Below are the relevant code snippets:

App.js:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from './Scene/homePage';
import LoginPage from './Scene/loginPage';
import ProfilePage from './Scene/profilePage';
import { useMemo } from "react";
import { useSelector } from 'react-redux';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
import { themeSettings } from './theme';

function App() {
  const mode = useSelector((state) => state.mode);
  const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);
  return (
    <div className="app">
      <BrowserRouter>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Routes>
            <Route path="/" element={<LoginPage />} />
            <Route path="/home" element={<HomePage />} />
            <Route path="/profile/:userId" element={<ProfilePage />} />
          </Routes>
        </ThemeProvider>
      </BrowserRouter>
    </div>
  );
}

export default App;

LoginPage Index.jsx:

import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
import Form from "./form";

const LoginPage = () => {
  const theme = useTheme();
  const isNonMobileScreens = useMediaQuery("(min-width: 1000px)");
  return (
    <Box>
      <Box
        width="100%"
        backgroundColor={theme.palette.background.alt}
        p="1rem 6%"
        textAlign="center"
      >
        <Typography fontWeight="bold" fontSize="32px" color="primary">
          Sociopedia
        </Typography>
      </Box>

      <Box
        width={isNonMobileScreens ? "50%" : "93%"}
        p="2rem"
        m="2rem auto"
        borderRadius="1.5rem"
        backgroundColor={theme.palette.background.alt}
      >
        <Typography fontWeight="500" variant="h5" sx={{ mb: "1.5rem" }}>
          Welcome to Blogit! Reinventing Blogging with style!
        </Typography>
        <Form />
      </Box>
    </Box>
  );
};

export default LoginPage;

HomePage.jsx:

import { Box } from "@mui/material";
import Navbar from "Scene/navbar"; 

const HomePage = () => {
    return (
        <Box>
            <Navbar />
        </Box>
    );   
};

export default HomePage;

Error Messages from Inspect Element > Sources:

Failed to load resource: net::ERR_CONNECTION_REFUSED
...

I've debugged and checked that all paths are correct, yet the LoginPage won't display. Any suggestions or insights would be greatly appreciated.

Tags: javascript, reactjs, mongodb, nodemon, mui