TypeError: Type '"day"' does not satisfy the constraint 'Path<TFormValues>'

[pranavdhamanage-work]

Error:

Type '"day"' does not satisfy the constraint 'Path'. ts(2344)

Description:

1. I have been going over this type battle for over hours now.
2. This is a generic component in our codebase used in multiple forms and it receives control prop externally from useForm.
3. We need to be able to provide generic form values/ field values type to useController hook. But when we provide generic type to useController first type argument and a value to name key in object provided to useController hook... ts compiler throws the error : Type '"day"' does not satisfy the constraint 'Path'. ts(2344)

Sandbox link:

https://codesandbox.io/s/reusable-react-hook-form-component-with-typescript-generics-forked-x43fd7?file=/src/SimpleForm.tsx

Code:

interface BirthDateFields<TFormValues extends Test> {
  control: Control<TFormValues, any>;
}

// Field that we'll be getting in TFormValues
interface Test { //<---------------------------------------- Dummy type for testing
  day: number;
}

export const BirthDateFields = <TFormValues extends Test>({
  control,
}: BirthDateFields<TFormValues>) => {
  const {
    field: dayField,
    fieldState: { error: dayFieldError }, 
  } = useController<TFormValues, 'day'>({   // <-------------------- We get a typescript error here on 'day' 
    name: 'day',
    control,
  });

return <SomeComponent />

The error we get on 'day' is : Type '"day"' does not satisfy the constraint 'Path'. ts(2344)

I also tried extending TFormValues from FieldValues provided by react hook form shown below:

interface BirthDateFields<TFormValues extends FieldValues> {
  control: Control<TFormValues, any>;
}

// Field that we'll be getting in TFormValues
interface Test {// <---------------------------------------- Dummy type for testing
  day: number;
}

export const BirthDateFields = <TFormValues extends FieldValues>({
  control,
}: BirthDateFields<TFormValues>) => {
  const {
    field: dayField,
    fieldState: { error: dayFieldError }, 
  } = useController<TFormValues, 'day'>({  //  <-------------------- We get a typescript error here on 'day' 
    name: 'day',
    control,
  });

return <SomeComponent />

Please let me know what am I missing in this code or what is actually going wrong. I am not able to pinpoint the issue.
Thanks in advance.

[giraphme]

I have defined reusable components with the following code. I'm glad if it helps.

type AccountSchema = {
  name: string;
  day: number;
};

type BirthDateSchema = {
  day: number;
};

type BirthDateFieldsProps<T> = T extends BirthDateSchema
  ? {
      control: Control<T>;
    }
  : never;

const BirthDateFields = <T extends BirthDateSchema>({
  control,
}: BirthDateFieldsProps<T>) => {
  return <input {...control.register('day')} />;
};

const AccountForm = () => {
  const { control } = useForm<AccountSchema>();
  return <BirthDateFields control={control} />;
};

const BirthDateForm = () => {
  const { control } = useForm<BirthDateSchema>();
  return <BirthDateFields control={control} />;
};