title: How to make Formik detect when Checkbox field is checked?
body: <p>I'm making a <em>Checkbox component</em> which needs validation (done with <code>Yup</code>). But it doesn't retrieves the actual value from the checbox, just from the one inside <code>initialValues</code>.</p>
  
  <p>Code of the form:</p>
  
  <pre><code>    &lt;div className='metro custom-pg'&gt;
        &lt;ThemeContext.Provider theme={theme}&gt;
          &lt;Formik
            initialValues={{
              text: '',
              email: '',
              phone: '',
              select: '',
              multi: [],
              checkbox: false,
            }}
            validationSchema={Schema}
            onSubmit={(values) =&gt; {
              alert(JSON.stringify(values, null, 2));
              console.log("values", values);
            }}
          &gt;
            {({
              errors,
              values,
              touched,
              handleSubmit,
              setFieldValue,
              setFieldTouched,
            }) =&gt; (
              &lt;Form onSubmit={handleSubmit}&gt;
                &lt;Field
                  id='text-field'
                  label='Plain text'
                  name='text'
                  type='text'
                  placeholder='Enter some characters'
                  component={TextField}
                /&gt;
                &lt;Field
                  id='email-field'
                  label='Email'
                  name='email'
                  type='email'
                  placeholder='Enter your email'
                  component={TextField}
                /&gt;
                &lt;Field
                  id='phone-email'
                  label='Phone'
                  name='phone'
                  type='phone'
                  placeholder='Enter your phone'
                  component={TextField}
                /&gt;
                &lt;Field
                  id='select'
                  name='select'
                  name='select'
                  label='Select an option'
                  options={options}
                  component={Select}
                /&gt;
                &lt;MultiSelect
                  id='multiselect'
                  name='multi'
                  label='Select multiple options'
                  options={multiOptions}
                  value={values.multi}
                  onChange={setFieldValue}
                  onBlur={setFieldTouched}
                  touched={touched.multi}
                  error={errors.multi}
                /&gt;
                &lt;Field
                  type="checkbox"
                  name='check'
                  id='check'
                  label='Check the mark'
                  component={Checkbox}
                /&gt;
                &lt;Button variant="primary" type="submit"&gt;Submit&lt;/Button&gt;
                &lt;/Form&gt;
            )}
          &lt;/Formik&gt;
        &lt;/ThemeContext.Provider&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Code of <em>Checkbox</em>:</p>
  
  <pre><code>// @flow
  import * as React from "react";
  import { Field, ErrorMessage } from 'formik';
  import { FormGroup, FormLabel } from "react-bootstrap";
  
  export type Props = {
    label?: String,
    id?: String,
    name?: String,
    disabled?: boolean,
    onChange: function,
    className?: string
  };
  
  export const Checkbox = ({ label, disabled, id, className }: Props) =&gt; {
    return (
      &lt;FormGroup&gt;
        &lt;input type="checkbox" id={name} name={name} /&gt;
        &lt;label htmlFor={name}&gt; {label}&lt;/label&gt;
        &lt;ErrorMessage component="div" className="input-error" name="checkbox" /&gt;
      &lt;/FormGroup&gt;
    );
  };
  
  Checkbox.defaultProps = {
    label: 'Default text',
    name: 'checkbox',
    disabled: false,
    className: ''
  
  }
  
  export default Checkbox;
  </code></pre>