How to use the react-final-form.useForm function in react-final-form

const useFieldArray = (
  name: string,
  {
    subscription = all,
    defaultValue,
    initialValue,
    isEqual = defaultIsEqual,
    validate: validateProp
  }: UseFieldArrayConfig = {}
): FieldArrayRenderProps => {
  const form = useForm('useFieldArray')

  const formMutators: Mutators = form.mutators
  const hasMutators = !!(formMutators && formMutators.push && formMutators.pop)
  if (!hasMutators) {
    throw new Error(
      'Array mutators not found. You need to provide the mutators from final-form-arrays to your form'
    )
  }
  const mutators = useConstant(() =>
    // curry the field name onto all mutator calls
    Object.keys(formMutators).reduce((result, key) => {
      result[key] = (...args) => formMutators[key](name, ...args)
      return result
    }, {})
  )

const useInitializeFormWithRecord = record => {
    const form = useForm();

    useEffect(() => {
        if (!record) {
            return;
        }

        const registeredFields = form.getRegisteredFields();

        // react-final-form does not provide a way to set multiple values in one call.
        // Using batch ensure we don't get rerenders until all our values are set
        form.batch(() => {
            Object.keys(record).forEach(key => {
                // We have to check the record key is actually registered as a field
                // as some record keys may not have a matching input
                if (registeredFields.some(field => field === key)) {
                    form.change(key, record[key]);

const EmailConfigContainer: React.FunctionComponent = ({
  email,
  submitting,
}) => {
  const form = useForm();
  useMemo(() => {
    let values: any = { email };
    if (email && email.smtp && email.smtp.authentication === null) {
      values = {
        email: {
          ...email,
          smtp: { ...email.smtp, authentication: true },
        },
      };
    }
    if (email && email.smtp && email.smtp.secure === null) {
      values = {
        email: {
          ...email,
          smtp: { ...email.smtp, secure: true },
        },

const PercentComplete = props => {
  const form = useForm()
  const numFields = form.getRegisteredFields().length
  const numErrors = Object.keys(form.getState().errors).length
  return (
    <progress value="{numFields">
  )
}
</progress>

export default function ValuesHandler({ valid, validating, values, onValues }) {
  const form = useForm();
  const validationPaused = form.isValidationPaused();

  useEffect(() => {
    if (!validating && !validationPaused) {
      onValues && onValues({ valid, values, form });
    }
  }, [form, onValues, valid, validating, validationPaused, values]);

  return null;
}

const AdvancedConfigContainer: React.FunctionComponent = ({
  settings,
  submitting,
}) => {
  const form = useForm();
  useMemo(() => form.initialize(purgeMetadata(settings)), []);
  return (
    
      
      
      
      
      
    
  );
};

const OrganizationConfigContainer: React.FunctionComponent = ({
  settings,
  submitting,
}) => {
  const form = useForm();
  useMemo(() => form.initialize(purgeMetadata(settings)), []);
  return (
    
      
      
      
    
  );
};
const enhanced = withFragmentContainer({

export const ModerationConfigContainer: React.FunctionComponent = ({
  settings,
  submitting,
}) => {
  const form = useForm();
  useMemo(() => form.initialize(purgeMetadata(settings)), []);
  return (
    
      
      
      
      
    
  );
};