Save button click but no trigger action

import React, { useCallback } from "react";
import { useTranslate, useShow, IResourceComponentsProps } from "@refinedev/core";
import { useForm } from "@refinedev/antd";
import { Form, Input, notification } from "antd";
import { Edit, InputMap, EmptyHeadersButtons } from "components";

export const LocationGroupEdit: React.FC<IResourceComponentsProps> = () => {
    const translate = useTranslate();
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const record = data?.data || {};

    const { form, formProps, saveButtonProps, onFinish } = useForm({
        action: "edit",
        successNotification: false,
        onMutationSuccess: ()  => {
            const message = translate("common.success");
            const description = translate("pages.locationsGroups.edit.success");
            notification.success({ message, description });
        },
        errorNotification: false,
        onMutationError: (data: any) => {
            const message = translate("common.error");
            const description = translate("pages.locationsGroups.edit.errors.badShape");
            notification.error({ message, description });
        },
    });

    const handleOnFinish = useCallback(async (params: any) => {
        const payload: any = { ...params };
        await onFinish(payload);
    }, [onFinish]);

    return (
        <Edit
            title={translate('buttons.edit')}
            saveButtonProps={saveButtonProps}
            headerButtons={EmptyHeadersButtons}
            isLoading={isLoading}
        >
            <Form
                {...formProps}
                layout="vertical"
                wrapperCol={{ span: 14 }}
                onFinish={handleOnFinish}
                initialValues={{...record}}
                name="location-group-edit"
            >

import React, { useCallback } from "react";
import { useTranslate, useShow, IResourceComponentsProps } from "@refinedev/core";
import { useForm } from "@refinedev/antd";
import { Form, Input, notification } from "antd";
import { Edit, InputMap, EmptyHeadersButtons } from "components";

export const LocationGroupEdit: React.FC<IResourceComponentsProps> = () => {
    const translate = useTranslate();
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const record = data?.data || {};

    const { form, formProps, saveButtonProps, onFinish } = useForm({
        action: "edit",
        successNotification: false,
        onMutationSuccess: ()  => {
            const message = translate("common.success");
            const description = translate("pages.locationsGroups.edit.success");
            notification.success({ message, description });
        },
        errorNotification: false,
        onMutationError: (data: any) => {
            const message = translate("common.error");
            const description = translate("pages.locationsGroups.edit.errors.badShape");
            notification.error({ message, description });
        },
    });

    const handleOnFinish = useCallback(async (params: any) => {
        const payload: any = { ...params };
        await onFinish(payload);
    }, [onFinish]);

    return (
        <Edit
            title={translate('buttons.edit')}
            saveButtonProps={saveButtonProps}
            headerButtons={EmptyHeadersButtons}
            isLoading={isLoading}
        >
            <Form
                {...formProps}
                layout="vertical"
                wrapperCol={{ span: 14 }}
                onFinish={handleOnFinish}
                initialValues={{...record}}
                name="location-group-edit"
            >