Как сделать форму такой, чтобы только зарегистрированный пользователь, имя пользователя которого находится в базе данных, мог получить доступ к форме приветствия?

Question

Я работаю на странице входа в приложение, используя React. В настоящее время он принимает имя, введенное клиентами. Я пытаюсь создать форму, чтобы только если имя человека уже зарегистрировано в базе данных, он может перейти к следующей форме. Я пытаюсь использовать Axios для доступа к данным через API в базе данных, но я застрял. Я использую React и axios.

// Regex expression for policy Number
const policyRegExp = /^\d{6}$/;

//Yup Validation Schema 
const validationSchema = Yup.object().shape({
  firstName: Yup.string("Enter a first name")
  .required("First name is required"),

  lastName: Yup.string("Enter a last name")
  .required("Last name is required"),

  policy: Yup.string("")
  .matches(policyRegExp, "Policy must contain 6 digit numbers")
  .required("Enter your Policy Number"),
})


export default function FormikForm_test() {
  return (
    <Formik
      initialValues={{firstName: "", lastName: "", policy: "" }}
      validationSchema={validationSchema}

      onSubmit={(values, {setSubmitting, resetForm}) => {
        setSubmitting(true);

       // ADD AXIOS HERE? //

        setTimeout(() => {
          alert(JSON.stringify(values,null,2));
          resetForm();
          setSubmitting(false);
        },1000)
      }}
    >
      {({values, 
        errors, 
        touched, 
        handleChange, 
        handleBlur, 
        handleSubmit, 
        isSubmitting
      }) => (
        <form onSubmit={handleSubmit}>
          <div className="input-row">
            <label htmlFor="firstName">Name</label>
            <br/>
            <input
              type="text"
              name="firstName"
              id="firstName"
              placeholder="Enter your first name"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.firstName}
              className={touched.firstName && errors.firstName ? "has-error" 
              : null}
            />
            <Error touched={touched.firstName} message={errors.firstName} />
          </div>
          <div className="input-row">
            <Button
              type="submit"
              variant="raised"
              color="primary"
              disabled={isSubmitting}
            >
            Submit
            </Button>
          </div> 
        </form>
      )}
    </Formik>

 );
};