title: React, Typescript, Hooks. Cannot invoke an expression whose type lacks a call signature
body: <p>I am new to react hooks and fairly new to typescript. I have been trying to make use of hooks, specifically the <code>useContext</code> hook, to manage global state (I appreciate for this example it may be overkill, but my goal is just to be able to understand it really).
  I have followed a few different examples, but none using typescript and am now getting this error:</p>
  
  <pre><code>Cannot invoke an expression whose type lacks a call signature. Type 'ContextProps' has no compatible call signatures.
  </code></pre>
  
  <p>I've looked at multiple other questions on here which explain the solution (something about the union on the signatures), but I just can't get my head around it in relation to my code.</p>
  
  <p>This is a simplified version on my code (please excuse, as I'm still learning :) ), but I get the error on the <code>handleOpenDrawer</code> function in <code>MainPage.tsx</code>:</p>
  
  <p><strong>App.tsx</strong></p>
  
  <pre><code>import React, { createContext, Dispatch, useReducer } from 'react';
  import MainPage from './MainPage';
  
  interface ContextProps {
      drawerState: DrawerState;
      drawerDispatch: Dispatch&lt;DrawerActions&gt;;
  }
  
  interface DrawerState {
      open: boolean;
  }
  
  const initialDrawerPosition:DrawerState = {
      open: false,
  };
  
  interface DrawerActions {
      type: 'OPEN_DRAWER' | 'CLOSE_DRAWER';
  }
  
  const reducer = (state:DrawerState, action:DrawerActions) =&gt; {
      switch (action.type) {
          case 'OPEN_DRAWER':
              return {
                  ...state,
                  open: true,
              };
          case 'CLOSE_DRAWER':
              return {
                  ...state,
                  open: false,
              };
          default:
              return state;
      }
  };
  
  export const DrawerDispatch = createContext({} as ContextProps);
  
  export default function App() {
      const [ drawerState, drawerDispatch ] = useReducer(reducer, initialDrawerPosition);
  
      const value = { drawerState, drawerDispatch };
  
      return (
          &lt;DrawerDispatch.Provider value={value}&gt;
              &lt;MainPage /&gt;
          &lt;/DrawerDispatch.Provider&gt;
      );
  
  }
  </code></pre>
  
  <p><strong>MainPage.tsx</strong></p>
  
  <pre><code>import { useContext } from 'react';
  import { DrawerDispatch } from './App';
  
  export default function App() {
      const dispatch = useContext(DrawerDispatch);
  
      const handleOpenDrawer = () =&gt; {
          dispatch({ type: 'OPEN_DRAWER' });
      };
  
      return (
          &lt;button onClick={handleOpenDrawer}&gt;
              Click me
          &lt;/button&gt;
      );
  }
  </code></pre>
  
  <p>I'm expecting to be able to update the <code>state.open</code> to true using the dispatch, but instead get the error mentioned above.
  Any help would be massively appreciated!</p>