issue: useWatch<T> returns wrong types

[stychu]

Version Number

7.52.2

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/brave-fermi-f4q84k

Steps to reproduce

1. Go to CodeSandbox
2. Hover on wrongType variable
3. See type is string | number | string[]

Expected behaviour

The type for wrongType should be based on picked properties in this case 'number' should be returned instead it returns the whole form type union.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[stychu]

So all issues are discussion now? Whats going on?

[loganyott]

Did you find a fix for this? I found this works if I use watch from useFormContext but if I try useWatch, I have to pass in the field name rather than it being inferred.

type Fields = {
  firstName: string,
  age: number,
};

const testOne = useWatch<Fields>({ name: 'firstName' }); // type is string|number
const testTwo = useWatch<Fields, 'firstName'>({ name: 'firstName' }); // type is string

This doesn't seem correct.

[loganyott]

Had an issue with my original fix but here is the not great solution I came up with for now.

const useWatch = <T extends keyof Values>({ name }: { name: T }) => defaultUseWatch<Values, T>({ name, exact: true });

You could extend the props to include other useWatch props but I don't need those for now. I'm still confused why this doesn't appear to be passed correctly vs watch from useFormContext.