title: Formik Form only updates state on second click
body: <p>I am trying to make a checkout form using Formik, however when I click the submit button and log the data to my console I don't see any changes until the second click.</p>
  <pre><code>        onSubmit={(values) =&gt; {
            addData(values);
            console.log(data);
          }}&gt;
  </code></pre>
  <pre><code>  const addData = (billing) =&gt; {
      setData((currentData) =&gt; {
        const shipping = {
          first_name: billing.first_name,
          last_name: billing.last_name,
          address_1: billing.address_1,
          address_2: billing.address_2,
          city: billing.city,
          state: billing.state,
          postcode: billing.postcode,
          country: billing.country,
        };
        return {billing, shipping, ...currentData};
      });
    };
    const [data, setData] = useState({
      payment_method: 'bacs',
      payment_method_title: 'Direct Bank Transfer',
      set_paid: true,
      line_items: [
        {
          product_id: 93,
          quantity: 2,
        },
        {
          product_id: 22,
          variation_id: 23,
          quantity: 1,
        },
      ],
      shipping_lines: [
        {
          method_id: 'flat_rate',
          method_title: 'Flat Rate',
          total: '10',
        },
      ],
    });
  </code></pre>
  <p>Additionally, when I go to change the data (my form doesn't reset on submission) I still see the old data and it doesn't update.</p>