Is it possible to have 2 arrays inside a tag along other fields? FieldArray Formik Yup

Question

So Im using Next.Js 13 AppRouter with TypeScript, I'm trying to have allergiesName as an array and medicalConditonsName as well. The thing is that the documentation says to use FieldArrays, but FieldArrays must be outside of the Form tag? From what I can tell. As of now both allergiesName and medicalConditonsName aren't arrays, but I'm just not sure how to make them both work there without wrapping Form with FieldArray. I need to push and pop too, or delete one that the user wants before submitting.

If I can get guidance or an angle on how to do this it would be great.

Thank you for your time.

<Formik
            validationSchema={SignUpSchema}
            initialValues={{
              allergiesName: "",
              medicalConditionsName: "",
              emergencyContactName: "",
              emergencyContactPhone: "",
            }}
            onSubmit={() => {}}
          >
            <div className="text-white w-[90%] formRegisterBg self-center flex flex-col px-4 pt-2 pb-6 rounded-[15px] form1">
              <span className="text-[20px] font-bold mt-2 mb-3">
                Medical Information
              </span>
              <Form>
                <FieldArray name="allergiesName">
                  <label
                    htmlFor="allergiesName"
                    className="text-[12px] font-bold"
                  >
                    Allergies
                  </label>
                  <Field
                    required
                    type="text"
                    id="alleriesName"
                    name="alleriesName"
                    className="rounded-[10px] inputFieldBg border-0 text-sm  focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                    autoComplete="additional-name"
                  ></Field>
                </FieldArray>
                <label
                  htmlFor="medicalConditionsName"
                  className="text-[12px] font-bold"
                >
                  Medical Conditions
                </label>
                <Field
                  required
                  type="text"
                  id="medicalConditionsName"
                  name="medicalConditionsName"
                  className="rounded-[10px] inputFieldBg border-0 text-sm  focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                  autoComplete="additional-name"
                ></Field>
                <label
                  htmlFor="emergencyContactName"
                  className="text-[12px] font-bold"
                >
                  Emergency Contact Name
                </label>
                <Field
                  required
                  type="text"
                  id="emergencyContactName"
                  name="emergencyContactName"
                  className="rounded-[10px] inputFieldBg border-0 text-sm  focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                  autoComplete="additional-name"
                ></Field>
                <label
                  htmlFor="emergencyContactPhone"
                  className="text-[12px] font-bold"
                >
                  Emergency Contact Phone
                </label>
                <Field
                  required
                  type="text"
                  id="emergencyContactPhone"
                  name="emergencyContactPhone"
                  className="rounded-[10px] inputFieldBg border-0 text-sm  focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                  autoComplete="additional-name"
                ></Field>
              </Form>
            </div>
          </Formik>
    ```