I have a Parent and Child components, where latter has a form in it:

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

function Parent() {

  const onSubmit = (data) => {
    console.log(data);
  };

  return <Child onSubmit={onSubmit} />
}

function Child({ onSubmit }) {
  const {
    register,
    handleSubmit,
  } = useForm();
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

Here I need to invoke form submission from Parent Component.

While I could take useForm to a Parent Component, I feel like this is against encapsulation principle since useForm is used in Child component, it should be there ideally:

function Parent() {
  const {
    register,
    handleSubmit,
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return <Child submit={handleSubmit(onSubmit)} register={register}  />
}

function Child({ submit, register }) {
 
  
  return (
    <form onSubmit={submit}>
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

Is there a better way to do this?