I am getting an error "Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))". Unable to find solution

const Header = () => {
const firebaseAuth = getAuth(app);
const provider = new GoogleAuthProvider();
const [{user}, dispatch] = useStateValue(); 

const login = async () =>{
    const {
        user: { refreshToken, providerData },
    } = await signInWithPopup(firebaseAuth, provider);
    dispatch({
        type: actionType.SET_USER,
        user: providerData[0],
    });
};

I am using context api to create a data layer at the top of all components. But I am trying that when the user logged in the user information stored in a state and gets updated. But here I am getting an error at const [{user}, dispatch] = useStateValue();