title: Why isn't the Formik `touched` property being populated?
body: <p>I'm making a form with React, Formik, react-bootstrap, and yup for validation. I am trying to display validation errors, but the <code>touched</code> property is not being populated with the fields.</p>
  
  <pre><code>const schema = yup.object({
    name: yup.string().required(),
    email: yup
      .string()
      .email()
      .required(),
  });
  
  const ChildForm = props =&gt; {
    const { child: { name = '', email = '' } = {} } = props;
    const submitHandler = ({name, email}) =&gt; console.log(name, email);
  
    return (
      &lt;Formik
        validationSchema={schema}
        onSubmit={submitHandler}
        initialValues={{ name, email }}
        render={({ handleSubmit, handleChange, values, touched, errors }) =&gt; 
        {
          console.log('touched: ', touched);
          return (
            &lt;Form noValidate className="mt-4" onSubmit={handleSubmit}&gt;
              &lt;Form.Row&gt;
                &lt;Form.Group as={Col} controlId="name"&gt;
                  &lt;Form.Label&gt;Full Name&lt;/Form.Label&gt;
                  &lt;Form.Control
                    name="name"
                    required
                    value={values.name}
                    onChange={handleChange}
                    isValid={touched.name &amp;&amp; !errors.name}
                    isInvalid={touched.name &amp;&amp; errors.name}
                    type="text"
                    placeholder="Your child's name"
                  /&gt;
                  &lt;Form.Control.Feedback&gt;Looks good!&lt;/Form.Control.Feedback&gt;
                  &lt;Form.Control.Feedback type="invalid"&gt;
                    {errors.name || 'Please enter your child\'s name'}
                  &lt;/Form.Control.Feedback&gt;
                &lt;/Form.Group&gt;
              &lt;/Form.Row&gt;
              &lt;Form.Row&gt;
                &lt;Form.Group as={Col} controlId="email"&gt;
                  &lt;Form.Label&gt;Email Address&lt;/Form.Label&gt;
                  &lt;Form.Control
                    name="email"
                    required
                    value={values.email}
                    onChange={handleChange}
                    isValid={touched.email &amp;&amp; !errors.email}
                    isInvalid={touched.email &amp;&amp; errors.email}
                    type="text"
                    placeholder="Your child's email address"
                  /&gt;
                  &lt;Form.Control.Feedback&gt;
                    No spam, we promise!
                  &lt;/Form.Control.Feedback&gt;
                  &lt;Form.Control.Feedback type="invalid"&gt;
                    {errors.email || 'Please enter a valid email address'}
                  &lt;/Form.Control.Feedback&gt;
                &lt;/Form.Group&gt;
              &lt;/Form.Row&gt;
              &lt;Form.Row className="float-right"&gt;
                &lt;Button variant="success" onClick={handleSubmit}&gt;
                  &lt;Icon icon={faSave} /&gt;
                  &amp;nbsp; Submit
                &lt;/Button&gt;
              &lt;/Form.Row&gt;
            &lt;/Form&gt;
          );
        }}
      /&gt;
    );
  }
  </code></pre>
  
  <p>What am I doing wrong here? The <code>console.log(touched)</code> always shows an empty object.</p>