React not rendering when using Auth0 header

Question

I am using auth0 for authentication in react app. My app is just button that would lead to auth0 page. However when I use <Auth0ProviderWithHistory> it doesn't render.

index.js File

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Auth0ProviderWithHistory from './auth0provider';

ReactDOM.render(
  <React.StrictMode>
    <Auth0ProviderWithHistory>
    <App />
 </Auth0ProviderWithHistory>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js File:

import"./App.css"
import React from "react"
import Auth0ProviderWithHistory from "./auth0provider"
import { useAuth0 } from "@auth0/auth0-react"

import Button from '@mui/material/Button';
 function App() {

      const {
        isLoading,
        isAuthenticated,
        error,
        user,
        loginWithRedirect,
        logout,
      } = useAuth0();
           
    return(

<Button variant="contained" onClick={() => loginWithRedirect }>Contained</Button>


    )
    }
export default App;

The code was taken from https://auth0.com/blog/complete-guide-to-react-user-authentication/ [Webpage with error][1]

auth0provider.js file:

import React from 'react';
import { useNavigate} from 'react-router-dom';
import { Auth0Provider } from '@auth0/auth0-react';

const Auth0ProviderWithHistory = ({ children }) => {
  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

  const history = useNavigate();

  const onRedirectCallback = (appState) => {
    history.push(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );
};

export default Auth0ProviderWithHistory;

Console Error