我的表单组件中有多个useForm钩子，我想创建一个方法来动态处理任意数量钩子的一个submit按钮，其思想是部分表单应该被连续验证。
对于孤立的场景，此方法有效：

import React from 'react'
import { useForm } from 'react-hook-form'

const MyFormComponent = () => {

   const form1 = useForm();
   const form2 = useForm();

   const onSubmitSuccess = () => {
      //some success logic
   };

   const handleMultiple = form1.handleSubmit(form2.handleSubmit(onSubmitSuccess));

   return <React.Fragment>
      {
         ...form1Fields
      }

      {
         ...form2Fields
      }

      <button onClick={handleMultiple}>submit</button>
   </React.Fragment>
}

现在我想创建一个泛型'handleMultiple'。我尝试使用redux 'compose'函数，但是这种方法忽略了验证：

import { compose } from 'redux'

const getHandleMultiple = (submitFunc, ...forms) => {
   const handleMultiple = compose(
      ...forms.map(form => form.handleSubmit),
      submitFunc
   );

   return {
      handleMultiple
   }
}

有什么想法如何存档这一点？不同的方法也赞赏。
编辑：我试着用'useMemo'钩子来 Package compose方法，就像@AhmedI.Elsayed建议的那样，但这并没有解决问题：

const useComposedFormSubmit = (submitFunc, ...forms) => {
    const handleComposedSubmit = useMemo(() => {
        
        return compose(
            ...forms.map(form => form.handleSubmit), 
            submitFunc
        )

    }, [forms, submitFunc])

    return { 
        handleComposedSubmit
    }
}

编辑2：代码沙盒：https://codesandbox.io/s/react-hook-form-compose-handlesubmit-yes5y9