formik-wizard-form | Build multi step forms using Formik with ease | Form library

I'm building an app that will need a complex form generation (from json/js object).

Here's an example of what I'm building: https://codesandbox.io/s/formik-form-wizard-test-vcj1t

My problem is the following:

all the input fields lose focus on every value change

The folder structure of the CodeSandbox project is the following (for easier code comprehension):

./src:

• App.js - main file with all the form generation (generateWizardSteps is the main function that does all the generation).

• formSetup.js - that's an object that defined form configuration. From objects like this I need to build dynamic forms. This object has the array of pages (these are the steps of the wizard), and each page has an array of fields (like input, select, checkbox etc). In its turn, each field has props property. props is what I pass to the React component as props.

• formComponents.js - this file contains all the form field React components that I use for generating my forms.

• decorateWithFormik.js - this file is just to make App.js a bit smaller. It's just the useFormik decorator.

The form is built using the formik library. Also, as I need a wizard-like form, I've found a nice library for it: formik-wizard-form.

I've looked through the stackoverflow questions on similar topics but couldn't find something that could fit my needs. Many questions/answers are about the problem with dynamic key props, but mine are static as far as I can tell (they all are taken from the initial formSetup object).

Another thing that I've noticed is that my form gets re-rendered on every value change, but I'm not sure if this is a problem at all.

Could you help me to figure out what the problem is, why does it happend and how to make my form fields not lose focus?