Error: React.Children.only expected to receive a single React element child. Formik

Question

I'm getting this error in the Formik props. I've been working with formik for a long time, and this is the first time it happens to me

Answer 1

 const Contacto = () => ( 
    <>
<section id="contact">
    <div class="container">
        <h2>Contactanos</h2>
        
        <div class="flex">

            <div id="form-container">
                <h3>Dejá un mensaje</h3>
               <Formik
                initialValues={{ name: '', email: '', motivo: '', mensaje:'' }}
                validationSchema={Schema}
                onSubmit={(values, { setSubmitting }) => {
                setTimeout(() => {
                setSubmitting(false);
                }, 1000);
                }}
        >   {({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit,
            isSubmitting
          }) => (
                <form onSubmit={handleSubmit}>
                    <label for="name">Nombre</label>
                    <input 
                    type="text" 
                    id="name"  
                    name="name"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.name} />
                    {errors.name && touched.name && errors.name}
                    <label for="email">Email</label>
                    <input  
                        id="email"
                        type="email"
                        name="email"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.email}
                    />
                    {errors.email && touched.email && errors.email}
                    <label for="subject">Motivo</label>
                    <input type="text" 
                            id="subject" 
                            name="motivo"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.motivo}
                    />
                    {errors.motivo && touched.motivo && errors.motivo}
                    <label for="message">Mensaje</label>
                    <textarea id="message"
                              type="mensaje"
                              name="mensaje"
                              onChange={handleChange}
                              onBlur={handleBlur}
                              value={values.mensaje}
                    >Escribí tu mensaje..</textarea>
                    {errors.mensaje && touched.mensaje && errors.mensaje}
                    <button class="rounded">Enviar</button>
                </form>
                )}
                </Formik> 
            </div>

            <div id="address-container">
                <label>Dirección</label>
                <address>
                    San Javier, Cordoba 
                </address>

                <label>Telefono</label>
                <a href="#">3544-32-2323</a>

                <label>Email</label>
                <a href="#">[email protected]</a>
            </div>
    </div>
    </div>
</section>

</>

); export default Contacto;

Answer 2

It's all inside a Fragment. And the imports are Ok

Answer 3

Formik's children should be either a single react node, or a render function.
So you'll get error in case of multiple child nodes e.g.:

      <Formik initialValues={...} onSubmit={() => ...}>
        <Field name="foo" ... />
        <hr>
        <MyFields ... />
      </Formik>

which you can fix simply by wrapping them in a Fragment:

      <Formik initialValues={...} onSubmit={() => ...}>
        <>
          <Field name="foo" ... />
          <hr>
          <MyFields ... />
        </>
      </Formik>