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

as: As = ForwardButton,
  className,
  children,
  handleSubmit,
  ...rest
}) {
  const {
    valid,
    validating,
    submitting,
    hasValidationErrors,
    hasSubmitErrors,
    dirtySinceLastSubmit,
    submitErrors,
    submitSucceeded,
  } = useFormState();

  const onlyWarningInSubmitErrors = onlyHasWarning(submitErrors);

  // can submit if:
  // 1) is valid
  //      OR has submit errors
  //      AND
  //        a) is dirty
  //        b) OR only has a warning (double conf)
  // 2) AND is not validating
  // 3) AND has no validation errors
  // 4) AND is not actively submitting
  // 5) AND submit has not yet succeeded
  const canSubmit =
    (valid ||
      (hasSubmitErrors &&

const ConnectionEditToolbar = ({ handleSubmitWithRedirect }) => {
    const formState = useFormState().values;
    const buttonProps = (() => {
        if (get(formState, '$staged.activation.activation_time')) {
            return [
                'Cancel Scheduled Activation',
                ,
            ];
        }
        switch (get(formState, '$staged.activation.mode')) {
            case 'activate_immediate':
                return ['Activate', ];
            case 'activate_scheduled_relative':
            case 'activate_scheduled_absolute':
                return ['Activate Scheduled', ];
            default:
                return ['Stage', ];
        }

export default function FormError(props) {
  const {
    submitError,
    submitErrors,
    error: validationError,
    dirtySinceLastSubmit,
  } = useFormState({
    subscription: {
      submitError: true,
      submitErrors: true,
      error: true,
      dirtySinceLastSubmit: true,
    },
  });

  const showValidationError = !!validationError;

  const showSubmitError = !!submitError && !dirtySinceLastSubmit;

  const warning = submitErrors && submitErrors[WARNING];
  const showWarning = !!warning && !dirtySinceLastSubmit;

  return showSubmitError || showValidationError || showWarning ? (

const SaveWithNoteButton = props => {
    const [create] = useCreate('posts');
    const redirectTo = useRedirect();
    const notify = useNotify();
    const { basePath, redirect } = props;

    const formState = useFormState();
    const handleClick = useCallback(() => {
        if (!formState.valid) {
            return;
        }

        create(
            null,
            {
                data: { ...formState.values, average_note: 10 },
            },
            {
                onSuccess: ({ data: newRecord }) => {
                    notify('ra.notification.created', 'info', {
                        smart_count: 1,
                    });
                    redirectTo(redirect, basePath, newRecord.id, newRecord);