Invalid hook call - React JS

Hello and happy new year. I am trying to set up Auth0 for my website and I have been receiving this error "Invalid hook call. Hooks can only be called inside of the body of a function component."

The error directs to useHistory on the following block of code.

I literally have tried everything and the error keeps persisting. I would be very grateful if someone can pinpoint what I am doing wrong.

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

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

    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;