React App not rendering with Auth0 wrapping

Help
,
1

I have been using the Auth0 guide to set up a react app and have got a very basic App.js with the Auth0-provider-with-navigate.js setup

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Auth0ProviderWithNavigate } from "./auth0-provider-with-navigate";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <React.StrictMode>
      <Auth0ProviderWithNavigate>
        <App />
      </Auth0ProviderWithNavigate>
    </React.StrictMode>
  </BrowserRouter>,
);

When I create a very simple Navbar with Login buttons, nothing appears in localhost at all and I can’t even get any basic Div elements to show. When I remove the wrapping of the <Auth0ProviderWithNavigate> from App.js wrapped around then it renders fine. Please can someone help me?

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;