Can't get useRef() to work with React Hook Form - reactjs

Question

But it does work when I disable React Hook Form and vice versa but not both together. I just want to focus on the title input field on first render. I minified it a little and imports/exports are not included in the snippet because it's usual boilerplate.
When I comment out ref={refFocus} RHF works but when I take it in again it won't function. I don't know if this is a conflict with the DOM reference since RHF is working a lot with it too. Might be a version mismatch, typescript error or something's deprecated or incompatible - I have no clue. I'd appreciate any idea.
I already browsed through the questions and found a similar issue but it lacks contents/code example and there's no answer: Why onchange, onblur and useRef doesn't work with react hook form?
And this one is not very alike, I tried that: How to set focus when using React hook form Controller component
For context, It's a simple UI where I can add tiles by filling out a form that's inside a header:
const Header = () : JSX.Element => {
const
{setCtxAdded} = useContext(TileListCtx),
addSchema = z.object({
image: z.string().url({ message: 'Value must contain a valid URL address.' }),
title: z.string(),
text: z.string().optional()
}),
refFocus = useRef<HTMLInputElement | null>(null)
useEffect(()=> refFocus.current?.focus(), [])
type AddFormValidation = z.infer<typeof addSchema>
const
{register, handleSubmit, formState:{errors}} = useForm<AddFormValidation>({
resolver: zodResolver(addSchema)
}),
addTile = async (data: Array<string> | unknown) : Promise<void> => {
const add: Response = await fetch('http://localhost:3000/api/add', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
const res: Array<JSON> | any = await add.json()
setCtxAdded(add.ok)
if (res.error.code == 'P2002') console.log('Title already exists.')
}
return (
<header>
<h1>X-5</h1>
<form onSubmit={handleSubmit(addTile)}>
<input {...register("image")} type='text' placeholder='Image' />
<input {...register("title")} ref={refFocus} type='text' placeholder='Title' />
<input {...register("text")} type='text' placeholder='Text' />
<button>Add Tile</button>
</form>
</header>
)
}

Answer 1

React hook form uses refs, but you replaced his ref with your ref.
RHF has setFocus method. Use it instead of your own ref:
const {
register,
handleSubmit,
formState: { errors },
setFocus
} = useForm<AddFormValidation>(),
useEffect(() => {
setFocus("title");
}, [setFocus]);
<form onSubmit={handleSubmit(addTile)}>
<input {...register("image")} type="text" placeholder="Image" />
<input {...register("title")} type="text" placeholder="Title" />
<input {...register("text")} type="text" placeholder="Text" />
<button>Add Tile</button>
</form>
https://codesandbox.io/s/loving-booth-2yg5ve?file=/src/Header.tsx