simple FormikStorybookProvider - useful to stories that depends on a FormikProvider

FormikStorybookProvider.tsx

import { Meta } from '@storybook/react/types-6-0';
import { Story } from '@storybook/addon-docs/blocks';
import { FormikProvider, useFormik } from 'formik';

import InputField, { InputFieldProps } from './InputField';
import { useMemo, ReactNode } from 'react';

export default {
  title: 'Form/InputField',
  component: InputField,
} as Meta;

type FormikStorybookProps = {
  initialValues?: Record<string, unknown>,
  children: ReactNode,
}
const FormikStorybook = (props: FormikStorybookProps) => {
  const {
    initialValues = {},
    children,
  } = props;

  const memoInitialValues = useMemo(() => initialValues, []);

  const formikbag = useFormik({
    initialValues: memoInitialValues,
    onSubmit: () => {},
  });

  return (
    <FormikProvider value={formikbag}>
      {children}
    </FormikProvider>
  );
}

const Template: Story<InputDrawerProps> = (args) => {
  return (
    <FormikStorybook>
      <InputField {...args} />
    </FormikStorybook>
  )
};

export const Default = Template.bind({});
Default.args = {};