Get the values in the form, from a component outside the form

I've a component that is built using react-hook-form. I'm trying access the value in form, through a button that is sibling of the Form component. Basically the getvalue function should somehow get the values in the form.

Form.tsx

export default function Form({ onSubmit }) {
    const { register, handleSubmit } = useForm({
     defaultValues: {
       firstName: "bill",
       lastName: "luo",
       email: "bluebill1049@hotmail.com"
     }
    });
 
 return (  
   <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input {...register("email")} />

      <button type="submit">Submit</button>
    </form>
   )
}

App.tsx

const onSubmit = data => console.log(data);
const getValue = ???

function App() {
   return (
      <Form onSubmit={onSubmit}/>
    
      <button onClick={getValue} />
   )

}

I want to get the form data values in getValue