const App: React.FC = () => {
  const [isDirty, setIsDirty] = React.useState(false);
  let formRef = Maybe.nothing<Formik<FormValues>>();

  const initFormState = () =>
    formRef.match<void>({
      Just: node => {
        const { dirty } = node.getFormikComputedProps();
        setIsDirty(dirty);
      },
      Nothing: () => null
    });

  const setFormRef = (ref: Formik<FormValues>) => {
    formRef = Maybe.of(ref);
    initFormState();
  };

  const onSubmit = (values: FormValues) => console.log(values);

  const submitForm = () =>
    formRef.match({
      Just: justCurrent => justCurrent.submitForm(),
      Nothing: () => null
    });

  const clearForm = () =>
    formRef.match({
      Just: node => node.resetForm(),
      Nothing: () => null
    });

  React.useEffect(initFormState, []);
  return (
    <div className="App">
      <SimpleForm
        ref={setFormRef}
        onSubmit={onSubmit}
        onDirtyChanged={setIsDirty}
      />
      <button type="submit" onClick={submitForm}>
        Submit
      </button>
      {isDirty && (
        <button type="button" onClick={clearForm}>
          Clear
        </button>
      )}
    </div>
  );
};