How to use the formik.useFormikContext function in formik

it('should return context with passed values', () => {
    const context = useFormikContext<{ age: number, ... }>();

    (context.values.age: number);
    // $ExpectError: check any
    (context.values.age: string);
  });
});

export default function Pod(props: StepperFormTargetProps) {
  const { errors, touched, values }: FormikCtx = useFormikContext()
  const { handleActionChange } = props

  return (
    <>
       {}} // Delay the form validation with an empty func. If don’t do this, errors will appear early
      >
        {actions.map((option: string) => (
          <menuitem value="{option.split('">
            {toTitleCase(option)}</menuitem>

export default function IO(props: StepperFormTargetProps) {
  const { values, errors, touched }: FormikCtx = useFormikContext()
  const { handleActionChange } = props

  return (
    <>
       {}} // Delay the form validation with an empty func. If don’t do this, errors will appear early
      >
        {actions.map((option: string) => (
          <menuitem value="{option}">
            {toTitleCase(option)}
          </menuitem>

export default function Time() {
  const formikCtx: FormikCtx = useFormikContext()
  const { errors, touched } = formikCtx

  useEffect(() => {
    resetOtherChaos(formikCtx, 'TimeChaos', false)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <>

const Target: React.FC = () => {
  const classes = useStyles()

  const formikCtx = useFormikContext()
  const kind = formikCtx.values.target.kind

  const [selected, setSelected] = useState('')

  const handleActionChange = (kind: string) => (e: React.ChangeEvent) =>
    resetOtherChaos(formikCtx, kind, e.target.value)

  const handleSelectTarget = (kind: ExperimentKind) => () => setSelected(kind)

  const renderBySelected = () => {
    switch (selected) {
      case 'PodChaos':
        return 
      case 'NetworkChaos':
        return 
      case 'IoChaos':

const SaveButton = () => {
    const formik = useFormikContext();

    return (
         formik.submitForm()}
            disabled={!formik.dirty || !formik.isValid || formik.isSubmitting}
            classNames={['AknButtonList-item']}
        >
            
        
    );
};

export default function Stress() {
  const formikCtx: FormikCtx = useFormikContext()
  const { values, setFieldValue } = formikCtx

  const actionRef = useRef('')
  const [action, _setAction] = useState('')
  const setAction = (newVal: string) => {
    actionRef.current = newVal
    _setAction(newVal)
  }

  useEffect(() => {
    resetOtherChaos(formikCtx, 'StressChaos', false)

    if (getIn(values, 'target.stress_chaos.stressors.cpu') === null) {
      setFieldValue('target.stress_chaos.stressors.cpu', defaultExperimentSchema.target.stress_chaos.stressors.cpu)
    }

export default function Network(props: StepperFormTargetProps) {
  const { errors, touched, values, setFieldValue }: FormikCtx = useFormikContext()
  const { handleActionChange } = props

  const { namespaces } = useSelector((state: RootState) => state.experiments)

  const initTarget = () => setFieldValue('target.network_chaos.target', defaultExperimentSchema.scope)
  const initPartitionTarget = () => {
    const target = getIn(values, 'target.network_chaos.target')

    setFieldValue(
      'target.network_chaos.target',
      Object.assign(
        {
          ...defaultExperimentSchema.scope,
          mode: 'all',
        },
        target

export const AutoSave = ({ debounceMs }) => {
  const formik = useFormikContext();
  const debouncedSubmit = useCallback(debounce(formik.submitForm, debounceMs), [
    debounceMs,
    formik.submitForm
  ]);

  useEffect(debouncedSubmit, [debouncedSubmit, formik.values]);

  return null;
};
export default AutoSave;

const FormState = () => {
    const formik = useFormikContext();

    return (
        (formik.dirty && (
            <div>
                <span>
                    
                </span>
            </div>
        )) ||
        null
    );
};