Context returning as undefined when exposing it through a custom hook with Typescript

Question

I'm working on a typescript version of Kent Dodd's pattern for using React Context with useReducer. You can see my version of the app at codesandbox.

In short, there are custom hooks that expose the contexts for state and dispatch. But when I try to use them, the contexts are returned as undefined.

I'm probably missing something really obvious in the difference between what he's doing and I'm doing, but I'm not seeing it. A fresh pair of eyes would be great. Thanks.

The Provider and the hooks looks like this

const AuthProvider = ({ children }: ProviderProps) => {
  const [state, dispatch] = useReducer(authReducer, initialState);

  return (
    <AuthStateContext.Provider value={state}>
      <AuthDispatchContext.Provider value={dispatch}>
        {children}
      </AuthDispatchContext.Provider>
    </AuthStateContext.Provider>
  );
};

function useAuthState() {
  const context = React.useContext(AuthStateContext);
  if (context === undefined) {
    throw new Error("useAuthState needs a context");
  }
  return context;
}

function useAuthDispatch() {
  const context = React.useContext(AuthDispatchContext);
  if (context === undefined) {
    throw new Error("useAuthDispatch needs a context");
  }
  return context;
}

The use of the hooks looks like this.

export default function App() {
  const dispatch = useAuthDispatch();
  const { isAuthenticated, user } = useAuthState();

  useEffect(() => {
    console.log("dispatch", dispatch);
  }, [dispatch]);

  return (
    <AuthProvider>
      <div>Authenticated: {isAuthenticated ? "true" : "false"}</div>
      <div>user: {user ? user : "not logged in yet"}</div>

      {isAuthenticated ? (
        <button onClick={() => dispatch({ type: "logout" })}>Logout</button>
      ) : (
        <button onClick={() => dispatch({ type: "login" })}>Login</button>
      )}
    </AuthProvider>
  );
}