What I'm doing wrong. Below is my code. // Imports

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { app } from "../../firebase.config";
import { useStateValue } from "../../context/StateProvider";
import { actionType } from "../../context/Reducer";



  const firebaseAuth = getAuth(app);
  const googleAuthProvider = new GoogleAuthProvider();

  const [{user}, dispatch] = useStateValue();
  const [isMenu, setIsMenu] = useState(false);

  const login = async () => {
    // const response = await signInWithPopup(firebaseAuth, googleAuthProvider);
    // console.log(response);
    if (!user) {
      const {
        user: { refreshToken, providerData },
      } = await signInWithPopup(firebaseAuth, googleAuthProvider);
      dispatch({
        type: actionType.SET_USER,
        user: providerData[0],
      });
      localStorage.setItem("user", JSON.stringify(providerData[0]));
    } else {
      setIsMenu(!isMenu);
    }
  };

// StateProvider.js

import React, {createContext , useContext, useReducer } from 'react';

export const StateContext = createContext();

export const StateProvider = ({Reducer,InitialState,children}) => (
   <StateContext.Provider value = {useReducer(Reducer,InitialState)} > {children} </StateContext.Provider>
)

export const useStateValue = () => useContext(StateContext);

// reducer.js

export const actionType = {
   SET_USER : 'SET_USER'
}

export const Reducer = (state, action) => {
   // console.log(action);
   switch(action.type) {
      case actionType.SET_USER: 
      return  {
         ...state,
         user: action.user,
      };
      default: 
         return state;
   }
}

// InitialState.js

import { fetchUser } from '../utils/fetchUserFromLocalStorage';

const userInfo = fetchUser();

export const InitialState = {
   user : userInfo
}

// Error I'm getting

Header.jsx:31 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Header (Header.jsx:31:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

I had imported every thing perfectly also used it coorect way. My page isn't rendering anything. It is compiled perfectly with 0 error. Error i'm getting is typeerror but i didn't see any type erro. Please help me.