title: Cannot read property of 'touched' undefined
body: <p>I'm using Formik to create forms in my React app, and using custom components as my Inputs, like so:</p>
  
  <pre><code>  &lt;Field
      ...
      component={Input}
    /&gt;
  </code></pre>
  
  <p>However, when I use <code>Input</code> outside of a Formik form, I get the following error: <code>Cannot read property of 'touched' undefined</code> </p>
  
  <p>My Input looks like this:</p>
  
  <pre><code>const Input = React.forwardRef(
    (
      { value, onChange, onKeyPress, placeholder, type, label, form: {touched, errors}, field, ...props },
      ref
    ) =&gt; (
        &lt;div style={{ display: "flex", flexDirection: "column" }}&gt;
          {label &amp;&amp; (
            &lt;label style={{ fontWeight: 700, marginBottom: `${scale.s2}rem` }}&gt;
              {label}
            &lt;/label&gt;
          )}
          &lt;input
            ref={ref}
            style={{
              borderRadius: `${scale.s1}rem`,
              border: `1px solid ${color.lightGrey}`,
              padding: `${scale.s3}rem`,
              marginBottom: `${scale.s3}rem`
            }}
            value={value}
            onChange={onChange}
            onKeyPress={onKeyPress}
            placeholder={placeholder ? placeholder : "Type something..."}
            type={type ? type : "text"}
            {...field}
            {...props}
          /&gt;
          {touched[field.name] &amp;&amp;
            errors[field.name] &amp;&amp; &lt;div className="error"&gt;{errors[field.name]}&lt;/div&gt;}
        &lt;/div&gt;
      )
  )
  </code></pre>
  
  <p>I'm not sure why <code>touched</code> should be undefined, seems it's conditionally rendered?</p>
  
  <p><a href="https://codesandbox.io/s/lp58rkkmkm" rel="nofollow noreferrer">Link to Sandbox</a></p>
  
  <p>Desired outcome: The <code>Input</code> should work both inside and outside of Formik.</p>
  
  <p>How do I resolve this?</p>