How to connect react-hook-form ref with a custom input component - reactjs

Question

I'm interested in using react-hook-form for data validation. I have a custom TextField component as follows.
src/components/Fields.js
function Label({ id, children }) {
return (
<label
htmlFor={id}
className="block mb-3 text-sm font-medium text-gray-700"
>
{children}
</label>
);
}
export function TextField({
id,
label,
inputRef,
type = "text",
className = "",
...props
}) {
return (
<div className={className}>
{label && <Label id={id}>{label}</Label>}
<input id={id} ref={inputRef} type={type} {...props} />
</div>
);
}
I've tried using react-hook-form like this..
src/App.js
import { TextField } from "./components/Fields";
import { useForm } from "react-hook-form";
import { useEffect } from "react";
export default function App() {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const mytest = register("mytest", { required: "mytest is a required field" });
const onSubmit = (data) => console.log(data);
useEffect(() => console.log(errors), [errors])
return (
<form onSubmit={handleSubmit(onSubmit)}>
<TextField
id="mytest"
name={mytest.name}
inputRef={mytest.ref}
label="This is a test"
placeholder="Placeholder"
/>
<input type="submit" />
</form>
);
}
but it's not working properly.
I've also tried using forwardRef to no avail.

Answer 1

Finally got this working after applying forwardRef properly. Still curious if there's a better way, so I'll leave this question open.
src/components/Fields.js
import { forwardRef } from "react";
function Label({ id, children }) {
return (
<label
htmlFor={id}
className="block mb-3 text-sm font-medium text-gray-700"
>
{children}
</label>
);
}
export const TextField = forwardRef(function TextField({
id,
label,
type = "text",
className = "",
...props
}, ref) {
return (
<div className={className}>
{label && <Label id={id}>{label}</Label>}
<input id={id} ref={ref} type={type} {...props} />
</div>
);
});
src/App.js
import { TextField } from "./components/Fields";
import { useForm } from "react-hook-form";
import { useEffect } from "react";
export default function App() {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const mytest = register("mytest", { required: "mytest is a required field" });
const onSubmit = (data) => console.log("data", data);
useEffect(() => console.log(errors), [errors])
return (
<form onSubmit={handleSubmit(onSubmit)}>
<TextField
id="mytest"
label="This is a test"
placeholder="Placeholder"
{...mytest}
/>
{errors.mytest && <>{errors.mytest.message}</>}
<input type="submit" />
</form>
);
}