How to use the @webiny/app/hooks/useHandlers.useHandlers function in @webiny/app

const Title = (props: Object) => {
    const { plugin: pluginName, title } = props;

    const client = useApolloClient();
    const [editDialogOpened, setEditDialog] = useState(false);
    const { showSnackbar } = useSnackbar();

    const openEditDialog = useCallback(() => setEditDialog(true), []);
    const closeEditDialog = useCallback(() => setEditDialog(false), []);

    const { onSubmit } = useHandlers(props, {
        onSubmit: ({ id, refresh }) => async plugin => {
            const { title: name } = plugin;
            const response = await client.mutate({
                mutation: updateElement,
                variables: {
                    id,
                    data: { name }
                }
            });

            const { error, data } = response.data.pageBuilder.updateElement;
            if (error) {
                closeEditDialog();
                setTimeout(() => {
                    // For better UX, success message is shown after 300ms has passed.
                    showSnackbar(error.message);

const MenuItemForm = (props: Object) => {
    const { onCancel, onSubmit } = useHandlers(props, {
        onCancel: ({ editItem, currentMenuItem, deleteItem }) => () => {
            if (currentMenuItem.__new) {
                deleteItem(currentMenuItem);
            } else {
                editItem(null);
            }
        },
        onSubmit: ({ items, onChange, editItem }) => data => {
            const item = omit(omitBy(data, isNull), ["__new"]);
            if (item.id) {
                const target = findObject(items, item.id);
                if (target) {
                    target.source[target.index] = item;
                    onChange([...items]);
                }
            } else {

export const useRevision = ({ revision, form }) => {
    const { history } = useReactRouter();
    const { showSnackbar } = useSnackbar();
    const client = useApolloClient();

    const {
        createRevision,
        editRevision,
        deleteRevision,
        publishRevision,
        unpublishRevision
    } = useHandlers(null, {
        createRevision: () => async () => {
            const { data: res } = await client.mutate({
                mutation: CREATE_REVISION_FROM,
                variables: { revision: revision.id },
                refetchQueries: ["FormsListForms"]
            });
            const { data, error } = res.forms.revision;

            if (error) {
                return showSnackbar(error.message);
            }

            history.push(`/forms/${data.id}`);
        },
        editRevision: () => () => {
            history.push(`/forms/${revision.id}`);