How to add a new Field when a button is clicked?

[animanoir]

I have a Select component and under it there's a button to basically create another one. I have researched ways of doing this, but I haven't found anything concise.

I read that FieldArray might help, and I'm trying to understand the example provided in the documentation. But it doesn't solves my problem:

            <FieldArray
              name='dischargeNorms'
              render={(arrayHelpers, index) => (
                <div>
                  <label>Norma de evaluación de descarga</label>
                  {
                    dummyNorms.normas.map(() => (
                      <div key={`norm-${index}`}>
                        <Field
                          name={`norm-${index}`}
                          type='select'
                          component={DUIKSelect}
                          options={
                            dummyNorms.normas
                        }
                        />
                      </div>
                    ))
                  }
                  <button
                    className='modal__addBtn'
                    onClick={
                      () => {
                        console.log('add norm');
                        arrayHelpers.insert(index+1,'');
                      }
                    }
                    type='button'
                  >
                    <span className='btn__addNorm'>
                      <img src={svgAdd} alt='Añadir norma' />
                      AGREGAR NORMA
                    </span>
                  </button>
                </div>
              )}
            />
          </FormGroup>