react-hook-form generic field component

Question

I am trying to implement form field component that can be used in root form level and as nested field.

export type FirstNameField = {
  firstName: string;
};

type GenericFormType<T, NS extends string | never = never> = NS extends never ? T : Record<NS, T>;

export type FirstNameProps<T extends string | never = never> = {
  namespace?: T;
};

export const FirstName = <T extends string | never = never>({ namespace }: FirstNameProps<T>) => {
  const form = useFormContext<GenericFormType<FirstNameField, T>>();
  return (
    <FormInput<GenericFormType<FirstNameField, T>>
      {...form}
      fieldName={namespace ? `${namespace}.firstName` : 'firstName'}
      label="First name"
      validation={{
        required: 'Required',
      }}
    />
  );
};

interface Props<T extends FieldValues = FieldValues> extends UseFormReturn<T> {
  label?: ReactNode;
  fieldName: FieldPath<T>;
  validation?: RegisterOptions;
}

export function FormInput<T extends FieldValues = FieldValues>(props: Props<T>) {
  return null;
}

So there is error in the line

fieldName={namespace ? `${namespace}.firstName` : 'firstName'}

that says

TS2322: Type 'firstName' | `${T}.firstName` is not assignable to type Path<GenericFormType<FirstNameField, T>>
Type string is not assignable to type Path<GenericFormType<FirstNameField, T>>

So I was trying to play with generic type and other, but it was not successful