title: Formik radio values not freshest from within a callback
body: <p>I use formik to build a form with two radio buttons:</p>
  <pre><code>const RadioButton = ({
    field: { name, value, onChange, onBlur },
    id,
    label,
    className,
    onSelect,
    ...props
  }) =&gt; {
    return (
      &lt;div&gt;
        &lt;input
          name={name}
          id={id}
          type=&quot;radio&quot;
          value={id}
          checked={id === value}
          onChange={onChange}
          onClick={onSelect}
          onBlur={onBlur}
          {...props}
        /&gt;
        &lt;label htmlFor={id}&gt;{label}&lt;/label&gt;
      &lt;/div&gt;
    );
  };
  
  const App = () =&gt; (
    &lt;div className=&quot;app&quot;&gt;
      &lt;Formik
        initialValues={{
          radioGroup: &quot;&quot;
        }}
        render={({ values }) =&gt; (
          &lt;form&gt;
            &lt;Field
              component={RadioButton}
              name=&quot;radioGroup&quot;
              id=&quot;radioOption1&quot;
              onSelect={() =&gt; console.log(values)}
              label=&quot;Option 1&quot;
            /&gt;
            &lt;Field
              component={RadioButton}
              name=&quot;radioGroup&quot;
              id=&quot;radioOption2&quot;
              onSelect={() =&gt; console.log(values)}
              label=&quot;Option 2&quot;
            /&gt;
            &lt;p&gt;{JSON.stringify(values)}&lt;/p&gt;
          &lt;/form&gt;
        )}
      /&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>My goal is to get notified when a radio element was selected. So I pass a onSelect callback to the RadioButton component and add it to the onClick handler of the input field: <code>onClick={onSelect}</code>.</p>
  <p>The notification works. However in</p>
  <pre><code>onSelect={() =&gt; console.log(values)}
  </code></pre>
  <p>values does not contain the selected radio. Strange enough,</p>
  <pre><code>&lt;p&gt;{JSON.stringify(values)}&lt;/p&gt;
  </code></pre>
  <p>shows the selected value as you can see here:</p>
  <p><a href="https://i.stack.imgur.com/pVwZ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pVwZ8.png" alt="enter image description here" /></a></p>
  <p>Try it for yourself:</p>
  <p><a href="https://codesandbox.io/s/formik-radio-and-checkbox-inputs-vguym" rel="nofollow noreferrer">https://codesandbox.io/s/formik-radio-and-checkbox-inputs-vguym</a></p>
  <p>Any idea why this happens?</p>