React App not rendering with Auth0 wrapping

Get Help
,
2

Here is the Navbar just for clarity

import React from "react";
import Button from "@mui/material/Button";
import { useAuth0 } from "@auth0/auth0-react";
import "./Navbar.css";

const Navbar = () => {
  const { isAuthenticated } = useAuth0();

  const LoginButton = () => {
    const { loginWithRedirect } = useAuth0();

    const handleLogin = async () => {
      await loginWithRedirect({
        appState: {
          returnTo: "/",
        },
      });
    };

    return (
      <Button variant="contained" color="primary" onClick={handleLogin}>
        Login
      </Button>
    );
  };

  const LogoutButton = () => {
    const { logout } = useAuth0();

    const handleLogout = () => {
      logout({
        logoutParams: {
          returnTo: window.location.origin,
        },
      });
    };

    return (
      <Button variant="contained" color="secondary" onClick={handleLogout}>
        Logout
      </Button>
    );
  };

  return (
    <div className="navbar">
      {!isAuthenticated && (
        <>
          <LoginButton />
        </>
      )}
      {isAuthenticated && (
        <>
          <LogoutButton />
        </>
      )}
    </div>
  );
};

export default Navbar;