How can I dynamically compose/chain multiple 'handleSubmit' methods in React Hook Form?

[krasivyy3954]

I have multiple useForm hooks in my form component. I want to create a method to dynamically handle one submit button for an arbitrary number of hooks. The idea is that the partial forms should be validated successively.

For an isolated scenario, this approach works:

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>
}

Now I want to create a generic 'handleMultiple'. I tried to utilize the redux 'compose' function, but that approach just ignores the validation:

import { compose } from 'redux'

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

   return {
      handleMultiple
   }
}

Any ideas how to archive this? Different approaches are also appreciatied.