title: How to set values in a multi-step Formik form with components that implement useField()
body: <p>I'm implementing the <a href="https://github.com/formium/formik/blob/master/examples/MultistepWizard.js" rel="nofollow noreferrer">multi-step wizard example</a> with Material-UI components and it works well with the <a href="https://formik.org/docs/api/useField" rel="nofollow noreferrer"><code>useField()</code> hook</a> but I cannot figure out how to bring <a href="https://formik.org/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean--void" rel="nofollow noreferrer"><code>setFieldValue()</code></a> into scope, so I can use it from a wizard step.</p>
  <p>I've seen suggestions to use the <a href="https://formik.org/docs/api/connect" rel="nofollow noreferrer"><code>connect()</code> higher-order component</a> but I have no idea how to do that.</p>
  <p>Here is a snippet of my code: <a href="https://codesandbox.io/s/formik-multi-step-set-value-lft8f?file=/src/App.js" rel="nofollow noreferrer">CodeSandbox</a>, and the use case:</p>
  <p>A wizard step has some optional fields that can be shown/hidden using a <a href="https://material-ui.com/components/switches" rel="nofollow noreferrer">Material-UI <code>Switch</code></a>. I would like the values in the optional fields to be cleared when the switch is toggled off.</p>
  <p>I.e.</p>
  <ol>
  <li>Toggle switch on.</li>
  <li>Enter data in Comments field.</li>
  <li>Toggle switch off.</li>
  <li>Comments value is cleared.</li>
  <li>Toggle switch on.</li>
  <li>Comments field is empty.</li>
  </ol>
  <p>Hoping someone can help! Thanks.</p>