Error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'signin') in AuthService TypeScript

I'm getting error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'signin')

The error always pops up in the first function of the login page, the values ​​are being filled in correctly, but the error always pops up as in printscrean at the end of this question

my login page:

import { Link, useNavigate } from "react-router-dom";
import { At, LockLaminated } from "phosphor-react";
import { AuthContext } from "../contexts/Auth/AuthContext";
import { Loading } from "../components/Loading";
import favicon from "../assets/favicon.ico";

export const Login = () => {
  const auth = useContext(AuthContext);
  const navigate = useNavigate();

  const [isRotate, setIsRotate] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isLogin, setIsLogin] = useState(false);

  const handleEmailInput = (event: ChangeEvent<HTMLInputElement>) => {
    setEmail(event.target.value);
  };

  const handlePasswordInput = (event: ChangeEvent<HTMLInputElement>) => {
    setPassword(event.target.value);
  };

  const handleLogin = async () => {
    if (email && password) {
      const isLogged = await auth.signin(email, password);
      if (isLogged) {
        navigate("/dashboard");
      } else {
        alert("not work");
      }
    }
  };

  return (....)

my AuthContext:

import { createContext } from "react";
import { User } from "../../types/User";

export type AuthContextType = {
  user: User | null;
  signin: (email: string, password: string) => Promise<boolean>;
  signout: () => void;
};

export const AuthContext = createContext<AuthContextType>();

my AuthProvider

import { useApi } from "../../hooks/useApi";
import { User } from "../../types/User";
import { AuthContext } from "./AuthContext";

export const AuthProvider = ({ children }: { children: JSX.Element }) => {
  const [user, setUser] = useState<User | null>(null);
  const api = useApi();

  const signin = async (email: string, password: string) => {
    const data = await api.signin(email, password);
    if (data.user && data.token) {
      setUser(data.user);
      setToken(data.token);
      return true;
    }
    return false;
  };
  const setToken = (token: string) => {
    localStorage.setItem("authToken", token);
  };

  return (
    <AuthContext.Provider value={{ user, signin, signout }}>
      {children}
    </AuthContext.Provider>
  );
};

error location

is there any way this works? looking up for your help, thanks