How do I get values from this Formik reactjs Input?

I am building a recipe database and I want to make it so that users can add and remove steps in an instructions. When a user clicks the "add step" button, it would add a new input.

 <h4>Instructions</h4>
              {Array.from(Array(step)).map((c, index) => {
                const stepNumber = index + 1;
                return (
                  <Field
                    type="text"
                    name={`instructions[${index}]`}
                    placeholder={`Instructions step ${stepNumber}`}
                    component={Input}
                    onChange={e => setIngredients(e.target.value)}
                  />
                );
              })}
              <ButtonWrapper>
                <Button
                  recipe
                  type="button"
                  onClick={() => handleInstructionRemove()}
                  contain
                >
                  Remove Last Instruction
                </Button>
                <Button
                  color="green"
                  contain
                  type="button"
                  onClick={() => setStep(step + 1)}
                >
                  Add Step
                </Button>
              </ButtonWrapper>

I am using useState to get the number of steps

  const [step, setStep] = useState(1);

I can successfully add, remove, and type in the inputs without creating any issues, but when I go to submit it none of the information is captured. I am using Formik to create the form.

 <Formik
      initialValues={{
        title: "",
        author: "",
        ingredients: [],
        amount: [],
        size: [],
        temperature: "",
        degrees: "f",
        instructions: [],
        cookingTime: "",
        description: "",
        serving: "",
        category: "main",
        image: null
      }}
      validationSchema={RecipeSchema}
      onSubmit={async (values) => {
        try {
          const url = await handleUpload();
          createRecipe(values, url);
          // history.push('/');
          console.log(values);

        } catch (err) {
          console.log(err);
        }
      }}
    >

The component itself is very long so sorry that I broke it into chunks. There are a lot of fields in it so I hope I gave enough. Any advice is much appreciated!