reactjs - Formikコンポーネントが反応タブでレンダリングされていない

Question

Formikでreact-tabsを使用しようとしていますが、タグを付けるたびに何もレンダリングされません。これは私がやろうとしていることです:<Formik>

    <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>

これは、Formik なしの場合のプリントスクリーンです。

何が間違っているのか本当にわかりません。誰もこの問題を抱えたことがありますか？私が得る固有のエラーは、react-tabs からのものです。

1.chunk.js:252727 警告: 失敗した prop タイプ: には、同じ数の「Tab」と「TabPanel」が必要UncontrolledTabsです。2 つの 'Tab' と 0 の 'TabPanel' を受け取りました。