title: typescript err: must have a '[Symbol.iterator]()' method that returns an iterator when using react usereducer hook in context-why?
body: <p>Im using typescript, not too familiar with and am getting the following err for when I use context and useReducer hook- in particularly for my dispatch method I get this:</p>
  <pre><code>contextProps must have a '[Symbol.iterator]()' method that returns an iterator.
  </code></pre>
  <p>I tried to research it but can't figure out what to do. I imagine its because of  const [state, dispatch] = useContext(GlobalState); and I need to specify something because of the array.
  Also, Im getting a ts err for value in</p>
  <pre><code>  &lt;GlobalState.Provider value={[state, dispatch]}&gt;
  </code></pre>
  <p>(see in code below). Somehow when I have it an array, all properties I have defined in ContextProps are missing.
  Any help would be so helpful!</p>
  <pre><code>//context.js file
  export interface ProjectProps {
    projects: string[]
  }
  
  export interface ContextProps extends ProjectProps {
    show: boolean
    posts: string[]
    //...
  }
  
  const initialState = {
    posts: [],
    show: false
    //...
  };
  
  export const GlobalState = React.createContext&lt;ContextProps | null&gt;(
    initialState
  )
  
  const reducer = (state, action) =&gt; {
    switch (action.type) {
      case &quot;SHOW&quot;:
        return { ...state, show: !state.show }
  
      default:
        return state
    }
  }
  
  const Store: React.FC&lt;{ children: React.ReactNode }&gt; = ({children}) =&gt; {
    const [state, dispatch] = useReducer(Reducer, initialState);
    return (
        &lt;GlobalState.Provider value={[state, dispatch]}&gt;
            {children}
        &lt;/GlobalState.Provider&gt;
    )
  };
  
  
  const App = () =&gt; {
    return (
        &lt;Store&gt;
            &lt;Header/&gt;
            &lt;Blog/&gt;
        &lt;/Store&gt;
    );
  };
  
  const Blog = () =&gt; {
  
    const [state, dispatch] = useContext(GlobalState);
  
    return (
        &lt;div&gt;
          &lt;button onClick={dispatch({type: &quot;SHOW&quot;})}&gt;&lt;/button&gt;
          {state.show ? &lt;p&gt;hello&lt;/p&gt; : null }
        &lt;/div&gt;
    );
  };
  </code></pre>