react hook form not getting context on nested component

I am having multiple tab, each tabs load different components. In each components I have different set of forms. So there is a generic footer where user can click on save or continue.

So I am trying to use the react hook form useContext, but I am not getting the values.

I have reproduced the same issue on the below code.

SaveAndContinue component

import React from "react";
import { useFormContext } from "react-hook-form";

const Footer = (props) => {
  const { formState, handleSubmit } = useFormContext();

  const onSaveDetails = (data) => {
    console.log("onSaveDetails", data);
  };

  const onContinue = (data) => {
    console.log("onContinue", data);
  };
  return (
    <>
      <button
        disabled={!formState?.isDirty}
        onClick={handleSubmit(onSaveDetails)}
      >
        Save
      </button>
      <button disabled={!formState?.isDirty} onClick={handleSubmit(onContinue)}>
        Continue
      </button>
    </>
  );
};

export default Footer;

How can I get the formData of each component form when clicking on the save or continue button using react hook form context

Any help is appreciated

Here is the codesandbox

Answer

I looked at your codesandbox. the problem is:

on your ServiceDetails and UserDetails components you should register your inputs using useFormContext not useForm:

const { register } = useFormContext({
    mode: "onBlur",
    reValidateMode: "onChange",
    defaultValues: {
      firstName: ""
    }
  });