interface FormValues {
  name: string;
  age: number;
}

type FormProps = FormikProps<FormValues> & {
  onDirtyChanged: (dirty: boolean) => void;
};

const FormComponent = ({ dirty, onDirtyChanged }: FormProps) => {
  React.useEffect(() => onDirtyChanged(dirty), [dirty]);
  return (
    <Form>
      <div className="form">
        <Input type="text" name="name" />
        <Input type="number" name="age" />
      </div>
    </Form>
  );
};

interface SimpleFormProps {
  onSubmit: (values: FormValues) => void;
  onDirtyChanged: (dirty: boolean) => void;
}

const SimpleForm = React.forwardRef<Formik<FormValues>, SimpleFormProps>(
  ({ onSubmit, onDirtyChanged }: SimpleFormProps, ref) => {
    const render = (props: FormikProps<FormValues>) => (
      <FormComponent {...props} onDirtyChanged={onDirtyChanged} />
    );

    return (
      <Formik<FormValues>
        ref={ref}
        render={render}
        initialValues={{
          name: "",
          age: 0
        }}
        onSubmit={onSubmit}
      />
    );
  }
);