无效的钩子调用 - React JS

Question

你好，新年快乐。我正在尝试为我的网站设置 Auth0，但我一直收到此错误“钩子调用无效。只能在函数组件的主体内部调用钩子。”

错误指向以下代码块中的 useHistory。

我确实尝试了所有方法，但错误仍然存​​在。如果有人能指出我做错了什么，我将不胜感激。

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;