i am begginer in react , i need to protect a page with my login , but this not works , this is the error : Uncaught TypeError: Auth_context__WEBPACK_IMPORTED_MODULE_1_.useAuth() is null here is my code...

import { useState, useCallback} from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "./Auth.context";

const Login = () => {
  const [username, setUsername] = useState("");
  const { setUser } = useAuth();
  const navigate = useNavigate();

  const login = useCallback((e) => {
    e.preventDefault();
    setUser({ username });
    navigate("/home");
  }, [setUser, username]);

  return(
    <div>
      <h1>Inicie sesion</h1>
      <form onSubmit={login}>
        <input value={username}
          onChange={(e) => setUsername(e.target.value)}
          placeholder="Escriba el nombre de usuario"
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

export default Login