react-hook-form registers each input field with a ref object and returns all the fields as an object on form submit. What you can do is, you can create your individual Step components with react-hook-form, and then in your onSubmit method, you can call props.setState(...data) (it saves your data into React Step Builder's global state) and props.next() (it sends you to the next Step). The idea here is, instead of submitting a form with react-step-form, you save its state to React Step Builder's state and move on. react-step-form's state will be your local state inside Step component, React Step Builder's state will be your global state where each and every field from all the steps will be merged.
react-hook-form registers each input field with a ref object and returns all the fields as an object on form submit. What you can do is, you can create your individual Step components with react-hook-form, and then in your onSubmit method, you can call props.setState(...data) (it saves your data into React Step Builder's global state) and props.next() (it sends you to the next Step). The idea here is, instead of submitting a form with react-step-form, you save its state to React Step Builder's state and move on. react-step-form's state will be your local state inside Step component, React Step Builder's state will be your global state where each and every field from all the steps will be merged.
Yeah, I realized I had to use props.setState and it worked out fine! Thanks