Предоставьте значение формы formik поставщику контекста

У меня есть компонент/форма <Login>, которая использует <Formik> для отслеживания состояния моих форм. Есть конкретное значение props.values.userType, которое я хочу передать поставщику контекста, чтобы я мог передать это свойство моему компоненту маршрутизации.

Моя цель - перенаправить пользователей, которые не вошли в систему как администратор, и, если они действительно являются администраторами, продолжить отображение маршрута в обычном режиме.

Поэтому я создал AuthContext.

const AuthContext = React.createContext();

В моем компоненте <Login> у меня есть компонент <Formik> ниже. Где я должен использовать AuthContext.Provider и как передать values.props.userType этому провайдеру? Должен ли props.values.userType быть инициализирован в состоянии компонента класса, в котором живет этот <Formik> компонент?

Или я должен создать хранилище объектов в состоянии, которое отслеживает userType? Что-то вроде этого

export const AuthContext = createContext({
  user: null,
  isAuthenticated: null
});

У меня кодыпесочница здесь.

class FormikLoginForm extends Component {
  constructor(props) {
  super(props);

this.state = {};
}

render() {
const {} = this.state;

return (

<Formik
      initialValues = {{
        username: "",
        password: "",
        userType: "",
      }}
      onSubmit = {(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 500);
      }}
      validationSchema = {Yup.object().shape({
        userType: Yup.string().required("User type is required"),
        username: Yup.string().required(
          "Required -- select a user type role"
        ),
        password: Yup.string().required("Password is required"),
      })}
    >
      {props => {
        const {
          values,
          touched,
          errors,
          dirty,
          isSubmitting,
          handleChangeEvent,
          handleBlur,
          handleSubmit,
          handleReset
        } = props;
        return (
          <>
            <Grid>
              <Grid.Column>
                <Header as = "h2" color = "teal" textAlign = "center">
                  Log-in to your account
                </Header>
                <Form size = "large" onSubmit = {handleSubmit}>
                  <Segment stacked>
                    <RadioButtonGroup
                      id = "userType"
                      label = "User Type"
                      value = {values.userType}
                      error = {errors.userType}
                      touched = {touched.userType}
                    >

Затем в моем файле index.js, где я визуализирую все свои маршруты, у меня есть мой AdminRoute, который использует логику, описанную выше.

const AdminRoute = props => {
  const { userType, ...routeProps } = props;
  if (userType !== "admin") return <Redirect to = "/login" />;
  return <Route {...routeProps} />;
};

const Routes = () => (
  <Router>
    <Switch>
      <Route exact path = "/" component = {Home} />
      <Route path = "/login" component = {FormikLoginForm} />
      <Route exact path = "/admin" component = {AdminPage} />
      />
      <Route path = "/admin/change-password" component = {ChangePassword} />
    </Switch>
  </Router>
);