Formik component not being rendered with react-tabs

Question

I'm trying to use react-tabs with Formik but everytime i put the <Formik> tag, nothing gets rendered. This is what i'm trying to do:

    <div className={classes.root}>
      <Typography className={classes.headerText}>Editar lojista</Typography>
      <Tabs>
        <TabList>
          <Tab>Loja e responsável</Tab>
          <Tab>Segurança</Tab>
        </TabList>
        <Formik
          initialValues={this.getInitalValues()}
          onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
              // alert(JSON.stringify(values, null, 2));
              setSubmitting(false);
              console.log(values);
            }, 400);
          }}
          validationSchema={schema}>
          {({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit,
            isSubmitting
            /* and other goodies */
          }) => (
            <form className={classes.form}>
              <TabPanel>
                <MainLojistaForm /> {/* this is one component */}
              </TabPanel>
              <TabPanel>
                <SegurancaForm /> {/* this is one component */}
              </TabPanel>
              <div className={classes.saveContainer}>
                <Button
                  variant="contained"
                  type="submit"
                  className={classes.button}>
                  Salvar
                </Button>
              </div>
            </form>
          )}
        </Formik>
      </Tabs>
    </div>

And this is a printscreen of what it looks like without Formik:

I really dont know what i'm doing wrong. Anyone ever had this issue? The unique error i get is from react-tabs:

1.chunk.js:252727 Warning: Failed prop type: There should be an equal number of 'Tab' and 'TabPanel' in UncontrolledTabs. Received 2 'Tab' and 0 'TabPanel'.

Answer 1

What you need to do is put Formik and form wrapping Tabs.