[React, TS, Formik + Yup, Vite, styled] Multi Step Form

What are you most proud of, and what would you do differently next time?

First, I made a custom input mask for a phone number without resorting to ready-made solutions from libraries. I also tried my hand at working with regular expressions.

Second, I worked firstly with multi-step forms. I wrote a custom hook for indexing and transition to other pages.

When the challenge was coming to an end, I found out that in the Formik repository in the examples folder, there are several more multi-step form implementations. And you can't find these examples on the official docs page. Ah, how I wish I had this information earlier. :,)

What challenges did you encounter, and how did you overcome them?

The difficulties were with the input mask, with regular expressions, with validation of each page as you move through the form. It turned out that Formik supports hot-swapping of validation schemes, so I solved this problem.

What specific areas of your project would you like help with?

In my implementation inside the render of the MultiStepForm component, I use Formik, which follows the construct:

{(formikProps) => (
        MultiStepFormFields
          {...formikProps}
          currentStepIndex={currentStepIndex}
          goTo={goTo}
          next={next}
          back={back}
          pagesCount={pagesCount}
        
      )}

I would certainly prefer to pass MultiStepFormFields only as a prop component in Formik and not clutter up extra lines of code. I ended up limiting myself with my custom hook, now the page index has to be passed from component to component. I came across another implementation in YouTube that seems to get rid of this limitation. But I'm running out of time to try it, should move next.