title: React - Object(...) is not a function or its return value is not iterable
body: <p>I have a small React hook that is wrapping a class component and I am trying to pass a state from this hook to the class using <code>useEffect</code> but I keep getting the followwing error;</p>
  <p><code>TypeError: Object(...) is not a function or its return value is not iterable</code> on the following line;</p>
  <p><code>const [{}, dispatch] = useStateValue();</code></p>
  <p>I use the same line in another hook elsewhere in my app so I am not sure why this one is throwing this particular error</p>
  <p>This is the complete component code.</p>
  <p>If anyone has any ideas why this may not be working I would be most appreciative to hear them.</p>
  <p>Thank you.</p>
  <p>Component</p>
  <pre><code>import React, { useEffect } from 'react';
  import App from 'next/app';
  
  import firebase from 'firebase';
  
  import { useStateValue, StateProvider } from '../state';
  import { firebaseConfig } from '../constants';
  import { initialState, reducer } from '../reducer';
  
  if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
  }
  
  function AppWrapper(Component) {
      return function WrappedComponent(props) {
          const [{}, dispatch] = useStateValue();
  
          useEffect(() =&gt; {
              console.log('Moiunted');
              firebase.auth().onAuthStateChanged((user) =&gt; {
                  dispatch({
                      type: 'userLogin',
                      currentUser: user
                  })
              });
          }), [];
          return &lt;Component {...props} /&gt;
      }
  }
  
  class MyApp extends App {
      render() {
          const { Component, pageProps } = this.props;
  
          return (
              &lt;StateProvider
                  initialState={initialState}
                  reducer={reducer}
              &gt;
                  &lt;Component {...pageProps} /&gt;
              &lt;/StateProvider&gt;
          );
      }
  }
  export default AppWrapper(MyApp)
  
  </code></pre>
  <p>State function</p>
  <pre><code>import React, { createContext, useContext, useReducer } from 'react';
  
  export const StateContext = createContext();
  
  export const StateProvider = ({reducer, initialState, children}) =&gt; (
      &lt;StateContext.Provider
          value={useReducer(reducer, initialState)}
      &gt;
          {children}
      &lt;/StateContext.Provider&gt;
  );
  
  export const useStateValue = () =&gt; useContext(StateContext);
  
  </code></pre>