Type Inference Problem with useController in React Hook Form

[PrinceHirani9]

I am using react-hook-form with Zod validation and trying to make my custom hook useDragItems generic. The goal is to pass a control and a name (path to a field in the form) dynamically while maintaining proper TypeScript inference. However, useController does not correctly infer the field type, and I encounter the following error:

Error message

Form types

// I cannot use this type in my custom hook because my custom hook needs to be reusable, while this interface will change per form.
 export type FormValues = {
    creator_email: string;
    teams: {
        role: string;
        team: {
            role: string;
            seniorityLevel: string;
            duration: string;
            quantity: string;
        }[];
    }[];
};

Common types

export type Child =  {
            role: string;
            seniorityLevel: string;
            duration: string;
            quantity: string;
        };
export type Team = {
        role: string;
        team: {
            role: string;
            seniorityLevel: string;
            duration: string;
            quantity: string;
        }[];
    }[];

Custom Hook useDragItems

import { useCallback } from 'react';
import { Control, FieldValues, Path, useController } from 'react-hook-form';

import { Team, TeamTalent } from '../types';

export interface UseDragItems<T extends FieldValues, K extends Path<T>> {
  control: Control<T>;
  name: K;
}

const useDragItems = <T extends FieldValues, K extends Path<T>>({ control, name }: UseDragItems<T, K>) => {
  const {
    field: { value },
  } = useController<T, K>({ control, name });

  const getCanDrag = useCallback(
    (teamRole: TeamTalent) => {
      return value.some((val) => val.role === teamRole) ? false : true;
    },
    [value]
  );

  return { getCanDrag };
};

Problem Explanation

1. The useController hook should infer the correct type from name, but instead, value is inferred as PathValue<T, Path<T>>, which does not automatically resolve to Team[].
2. Because of this, val in value.some((val) => val.role === teamRole) is implicitly any, causing a TypeScript error.
3. My expectation is that when name is "teams", value should be inferred as Team[], but TypeScript does not resolve this correctly.

Why This Needs to Be Generic

• This custom hook is not specific to just "teams". It is meant to be used in multiple places with different form structures and field names.
• It should work generically for any field path provided in name, ensuring that the correct type is inferred dynamically.

Attempted Workarounds

• Explicitly setting useController<FormValues, "teams">({ control, name })
• Type casting value as Team[], which works but is not ideal

Expected Behavior

• useController should infer the correct type from name, so value should automatically be Team[] when name is "teams".
• This should allow value.some((val) => val.role === teamRole) without TypeScript errors.

Question

How can I ensure that useController infers the correct type for value based on the name path without needing type assertions? Is there a recommended approach to handle this issue in a generic way? Also please let me know if I am going in the right direction or not.