Get input values from children in react

Question

I'm trying to get the text value of the inputs that I pass as children. It's my first attempt to create my very own node module.

App.tsx (Client):

import React from 'react';
import { TextField, Button } from '@mui/material';
import {MyForm} from 'react-myform'; // My node module

function App() {
  return (
    <div>
      <MyForm>
        <TextField/>
        <TextField/>
        <Button type={"submit"}/>
      </MyForm>
    </div>
  );
}

export default App;

MyForm:

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

type MyFormProps = {
  children?: React.ReactNode
}

const MyForm: React.FC<MyFormProps > = (props) => {
  const { register, handleSubmit } = useForm();
  const onSubmit = handleSubmit(data => console.log(data));

  return (
    <div>
      <form onSubmit={onSubmit}>
        {props.children}
      </form>
    </div>
  );
}

export default MyForm;

How can I register the input fields on the useform? Is there a way using refs?

PS: I would prefer solutions with functional components, because I'm not yet familiar with class components.