How to use setValueAs and set input value programmatically at the same time ?

[clemstoquart]

Hello,

I'm using react-hook-form 7.52.1 with Typescript 5.5 and React 18.3.

So, I have a basic form that is used to send emails with a cc input that takes a comma separated string of emails. In order to avoid dealing with this awkward string I've used setValueAs to convert it to a string array.

<input
                {...register("cc", {
                  setValueAs: fromCommaSeparatedString, // basically a split()
                  validate: {
                    shouldNotContainMoreThanTenEmails: noMoreThanTenItems,
                    shouldContainValidEmail: validEmails,
                  },
                })}
                type="text"
/>

And in my form model I have cc: string[].

This is working as expected. Great !

But now I want to initialize my cc input with a value and that's where I fail.
I'm using the setValue("cc", myEmails) where myEmails is a string array. Typescript compiler is happy but the input isn't populated.

If I disable type checking with a setValue("cc", myEmails.join()) it works ! 🤯

So it looks like a typescript issue only. What do you think ? Is there a way to make it work with proper type checking or am I hitting a type system limitation ?