Question about TypeScript Overload Error when Using React Hook Form in a React Component

Code of the Component

import { UseFormReturn } from "react-hook-form";
import { FormItem } from "../ui/form";
import { Label } from "../ui/label";
import { removeNonNumericChars } from "@/lib/utils/remove-non-numeric-chars.util";
import { MaskedInput } from "../ui/input";

interface PhoneInputFormFields {
    countryCode: string;
    areaCode: string;
    number: string;
} 

interface PhoneInputProps<T extends PhoneInputFormFields> {
    form: UseFormReturn<T, any, T>;
}

export function PhoneInput<T extends PhoneInputFormFields>({ form }: PhoneInputProps<T>) {
    return (
        <div className="grid gap-4 sm:grid-cols-3">
            {/* Country Code Field */}
            <FormItem>
                <Label htmlFor="countryCode">Country Code</Label>
                <MaskedInput
                    mask="+99"
                    id="countryCode"
                    placeholder="+55"
                    autoCapitalize="none"
                    autoComplete="tel-country-code"
                    autoCorrect="off"
                    value={form.watch("countryCode")}
                    onInput={(event) => {
                        form.setValue(
                            "countryCode",
                            removeNonNumericChars(event.currentTarget.value)
                        );
                    }}
                />
                {form.formState.errors.countryCode && (
                    <p className="px-1 text-xs text-red-600">
                        {form.formState.errors.countryCode.message}
                    </p>
                )}
            </FormItem>
            {/* Area Code Field */}
            <FormItem>
                <Label htmlFor="areaCode">Area Code</Label>
                <MaskedInput
                    mask="99"
                    id="areaCode"
                    placeholder="00"
                    autoCapitalize="none"
                    autoComplete="tel-area-code"
                    autoCorrect="off"
                    value={form.watch("areaCode")}
                    onInput={(event) => {
                        form.setValue("areaCode", removeNonNumericChars(event.currentTarget.value));
                    }}
                />
                {form.formState.errors.areaCode && (
                    <p className="px-1 text-xs text-red-600">
                        {form.formState.errors.areaCode.message}
                    </p>
                )}
            </FormItem>
            {/* Phone Number Field */}
            <FormItem>
                <Label htmlFor="number">Phone Number</Label>
                <MaskedInput
                    mask="99999-9999"
                    id="number"
                    placeholder="00000-0000"
                    autoCapitalize="none"
                    autoComplete="tel-national"
                    autoCorrect="off"
                    value={form.watch("number")}
                    onInput={(event) => {
                        form.setValue("number", removeNonNumericChars(event.currentTarget.value));
                    }}
                />
                {form.formState.errors.number && (
                    <p className="px-1 text-xs text-red-600">
                        {form.formState.errors.number.message}
                    </p>
                )}
            </FormItem>
        </div>
    );
}

Explanation of the Code

1. Imports and Interfaces: Necessary modules are imported, and two interfaces are defined. PhoneInputFormFields defines the expected fields for the phone form, while PhoneInputProps defines the expected properties for the component.

2. PhoneInput Component: This is the main component. It receives form from React Hook Form as a property.

3. Input Fields: The component has three input fields for country code, area code, and phone number. Each field is encapsulated within a FormItem, an external component that encapsulates the label and input field.

4. MaskedInput: We’re using a MaskedInput component to apply masks to the input fields. This helps with formatting and validation of the entered data.

5. Event Handlers: For each field, we’re defining an onInput event handler to update the field value as the user types. This event handler calls form.setValue from React Hook Form to update the field value.

6. Error Display: For each field, we’re checking if there are errors in the form state (form.formState.errors). If there are errors, we’re displaying a corresponding error message.

Error

No overload matches this call.
  Overload 1 of 4, '(names: readonly Path<T>[], defaultValue?: DeepPartial<T> | undefined): readonly PathValue<T, Path<T>>[]', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'readonly Path<T>[]'.
  Overload 2 of 4, '(name: Path<T>, defaultValue?: PathValue<T, Path<T>> | undefined): PathValue<T, Path<T>>', gave the following error.
    Argument of type '"countryCode"' is not assignable to parameter of type 'Path<T>'.
  Overload 3 of 4, '(callback: WatchObserver<T>, defaultValues?: DeepPartial<T> | undefined): Subscription', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'WatchObserver<T>'.ts(2769)

Explanation of the Error

TypeScript is complaining about overload resolution that isn’t being resolved correctly. It seems there’s an incompatibility between the expected types and the arguments passed to the setValue function of react-hook-form. This could be caused by misuse of generics or incorrect type inference.

Request for Help

I would like to understand why I’m getting this error and how I can fix it. If anyone could guide me on the best approach to solve this issue, I would greatly appreciate it!