Кнопка входа в систему Auth0 — предупреждение о недопустимом вызове хука

Я пытаюсь ознакомиться с Auth0 и столкнулся с проблемой. Я следовал их руководству https://auth0.com/docs/quickstart/spa/react, чтобы создать одностраничное приложение. К сожалению, я мало что знаю о javascript :( Поэтому я настроил кнопку входа следующим образом:

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  return <button onClick = {() => loginWithRedirect()}>Log In</button>;
};

export default LoginButton;

Затем в учебнике говорится, что нужно просто добавить кнопку, но я не знаю, как это сделать, это то, что я сделал, но выдает ошибку недопустимого хука:

import { React } from "react";
import { Link } from "react-router-dom";
import './styles.css';
import '../components/Auth0LoginButton';
import LoginButton from "../components/Auth0LoginButton";

export default function HomePage(){

    return (
        
        <div className = "MainContent">
            <p class = "Content">Please LogIn to continue</p>
            
             <>
                <button 
                    variant = "primary"
                    id = "LoginBtn"
                    onClick = {() => LoginButton()}
                    
                    >
                        Login
                </button>
             </>   
            <p>
                <Link to = "./UserPage"> Access UserPage</Link>
            </p>
        </div>
        
    )
}

Кто-нибудь сейчас, как это сделать правильно? Я предполагаю, что неправильно нажимаю кнопку...