Attempting to have a strongly typed React Context

index.tsx

import * as React from "react";
import PropTypes from "prop-types";

export const AuthRequiredModalContext = React.createContext<boolean>(false);

interface AuthRequiredContextInterface {
  isAuthRequiredModalOpen: boolean;
  setIsAuthRequiredModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

export const AuthRequiredModalProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [isAuthRequiredModalOpen, setIsAuthRequiredModalOpen] =
    React.useState<boolean>(false);

  const value = React.useMemo<AuthRequiredContextInterface>(
    () => ({
      isAuthRequiredModalOpen,
      setIsAuthRequiredModalOpen,
    }),
    [isAuthRequiredModalOpen, setIsAuthRequiredModalOpen]
  );

  return (
    <AuthRequiredModalContext.Provider value={value}>
      {children}
    </AuthRequiredModalContext.Provider>
  );
};

export const useAuthRequiredModalState = () => {
  const context = React.useContext(AuthRequiredModalContext);

  if (!context)
    throw Error(
      "useAuthRequiredModalState requires a AuthRequiredModalProvider"
    );

  return context;
};

AuthRequiredModalProvider.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.object,
    PropTypes.func,
  ]).isRequired,
};