Using the useContext , it says object is not iterable (cannot read property Symbol(Symbol.iterator))? - node.js

Question

When ever i am using useContext in the js file, it gives the error "TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))". Removing that line , it works perfectly fine . I am not able to figure out the problem with this. Any help would be appreciated.
import { useRef } from "react";
import "./login.css";
import { loginCall } from "../../apicalls";
import { useContext } from "react";
import {AuthContext} from '../../context/AuthContext.js'
export default function Login() {
const email = useRef();
const password = useRef();
const [user,dispatch] = useContext(AuthContext);
const handleClick = (e) => {
e.preventDefault();
// loginCall(
// { email: email.current.value, password: password.current.value },
// dispatch
// );
console.log('hi');
};
// console.log(user);
return (
<div className="login">
<div className="loginWrapper">
<div className="loginLeft">
<h3 className="loginLogo">SocioFolio</h3>
<span className="loginDesc">
Connect with friends and the world around you on SocioFolio.
</span>
</div>
<div className="loginRight">
<form action=""
onSubmit={handleClick}
>
<div className="loginBox">
<input placeholder="Email" type="email" required className="loginInput" />
<input placeholder="Password" type="password" required minLength="6" className="loginInput" />
<button className="loginButton">Log In</button>
<span className="loginForgot">Forgot Password?</span>
<button className="loginRegisterButton">
Create a New Account
</button>
</div>
</form>
</div>
</div>
</div>
);
}