无效的钩子调用 - 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;