title: How to pass Formik's field prop to a storybook story
body: <p>I'm trying to create a story for one of my components that use Formik. Here's the component:</p>
  <pre><code>import { memo } from 'react';
  
  import { OutlinedTextFieldProps } from '@mui/material/TextField';
  import { InputAdornment, TextField as MuiTextField } from '@mui/material';
  import { FieldProps } from 'formik';
  
  interface TextFieldPropsInterface extends OutlinedTextFieldProps, FieldProps {
    validationErrors?: Record&lt;string, string[]&gt; | undefined;
    loading?: boolean;
    endAdornmentText?: string;
  }
  
  function TextField({
    loading,
    validationErrors,
    field,
    form,
    endAdornmentText,
    ...TextFieldProps
  }: TextFieldPropsInterface) {
    const { name } = field;
    const { touched, errors } = form;
    const { helperText } = TextFieldProps;
  
    const hasError = touched[name] &amp;&amp; Boolean(errors[name]);
    const errorMessage = errors &amp;&amp; errors[name];
  
    return (
      &lt;MuiTextField
        {...TextFieldProps}
        error={hasError}
        helperText={hasError ? errorMessage : helperText}
        disabled={loading || TextFieldProps?.disabled}
        InputProps={{
          endAdornment: endAdornmentText ? (
            &lt;InputAdornment position='end'&gt;{endAdornmentText}&lt;/InputAdornment&gt;
          ) : null,
        }}
        {...field}
      /&gt;
    );
  }
  
  export default memo(TextField);
  </code></pre>
  <p>Here's my story for this component:</p>
  <pre><code>import { ComponentStory, ComponentMeta, storiesOf } from '@storybook/react';
  import { withFormik } from '@bbbtech/storybook-formik';
  
  import FormikTextField from '.';
  
  export default {
    component: FormikTextField,
    decorators: [withFormik],
  } as unknown as ComponentMeta&lt;typeof FormikTextField&gt;;
  
  const Template: ComponentStory&lt;typeof FormikTextField&gt; = (args) =&gt; (
    &lt;FormikTextField {...args} /&gt;
  );
  
  export const Default = Template.bind({});
  
  Default.args = {
    loading: false,
    validationErrors: undefined,
    endAdornmentText: 'End adornment',
  };
  </code></pre>
  <p>This is throwing an error:</p>
  <pre><code>TypeError
  Cannot destructure property 'name' of 'field' as it is undefined.
  Call Stack
   TextField
    main.iframe.bundle.js:1497:5
   renderWithHooks
    vendors-node_modules_bbbtech_storybook-formik_dist_esm_index_js-node_modules_mui_icons-materi-41c387.iframe.bundle.js:116439:18
   mountIndeterminateComponent
    vendors-node_modules_bbbtech_storybook-formik_dist_esm_index_js-node_modules_mui_icons-materi-41c387.iframe.bundle.js:119265:13
   beginWork
    vendors-node_modules_bbbtech_storybook-formik_dist_esm_index_js-node_modules_mui_icons-materi-41c387.iframe.bundle.js:120503:16
   HTMLUnknownElement.callCallback
    vendors-node_modules_bbbtech_storybook-formik_dist_esm_index_js-node_modules_mui_icons-materi-41c387.iframe.bundle.js:105399:14
   Object.invokeGuardedCallbackDev
    vendors-node_modules_bbbtech_storybook-formik_dist_esm_index_js-node_modules_mui_icons-materi-41c387.iframe.bundle.js:105448:16
   invokeGuardedCallback
    vendors-node_modules_bbbtech_storybook-formik_dist_esm_index_js-node_modules_mui_icons-materi-41c387.iframe.bundle.js:105510:31
   beginWork$1
    vendors-node_modules_bbbtech_storybook-formik_dist_esm_index_js-node_modules_mui_icons-materi-41c387.iframe.bundle.js:125413:7
   performUnitOfWork
    vendors-node_modules_bbbtech_storybook-formik_dist_esm_index_js-node_modules_mui_icons-materi-41c387.iframe.bundle.js:124225:12
   workLoopSync
    vendors-node_modules_bbbtech_storybook-formik_dist_esm_index_js-node_modules_mui_icons-materi-41c387.iframe.bundle.js:124156:5
  </code></pre>