Reactjs - How to handle onChange with the initial value is an empty array

I am building a recipe database in reactjs. I am trying to figure out how to fix the situation I am in. I am using formik. So my initial values look like:

initialValues={{
      instructions: [],

The amount of inputs for instructions are based on a useState of numbers. I'm not sure if that code is important to show. I also made a useState for ingredients, setIngredients. I've tried making the initial value an array and I've tried making the initial value as "". But here is what the input looks like

  {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); }}
                  />
                );
              })}

If I remove the onChange, it becomes an uncontrolled variable and I get the error on the console. If I leave the onChange in, there are no values submitted and I get back an empty array.