Typing issue with react hook form controlled input

I use react-hook-forms in my application. The application use office-ui-fabric-react library.

In order to incorporate the framework inputs, I use the <Controller> component to wrap the 3rd party component.

This is working well like this:

<Controller
    control={control}
    name={"Value"}
    rules={{ required: true }}
    render={({ field, fieldState, formState }) => (
      <TextField
        value={field.value}
        errorMessage={fieldState.error?.message}
        label={field.name}
        description={"Value of the property"}
        onChange={(_, value) => field.onChange(value)}
        onBlur={field.onBlur}
        required
      />
    )}
  />

But because this pattern is quite verbose, I want to isolate this into a ControlledTextField component.

I expect to be able to use it like this:

<ControlledTextField
    control={control}
    name={'Value'}
    rules={{ required: true }}
    label={'Value'}
    description={"Value of the property"}
    required
/>

In order to achieve that, I tried this:

type ControllerPropsEx = Omit<ControllerProps, "render" | "control" | "name">;

// Base type for controlled inputs
type ControlledType<F extends FieldValues, T> = {
  name: Path<F>;
  control: Control<F>;
  controllerProps?: ControllerPropsEx;
} & T;

// props specific to TextField component, combined with controller props 
// and where I remove props actually managed by react hook form
type ControlledTextFieldProps<F extends FieldValues> = ControlledType<
  F,
  Omit<ITextFieldProps, "onChange" | "onBlur" | "value" | "errorMessage"> // Remove all properties that is already handled by the controller
>;

const ControlledTextField = <F extends FieldValues>({
  name,
  control,
  controllerProps,
  ...props
}: ControlledTextFieldProps<F>): JSX.Element => {
  return (
    <Controller
      name={name}
      control={control}
      {...controllerProps}
      render={({
        field: { onBlur, onChange, value, name },
        fieldState: { error }
      }) => (
        <TextField
          {...props}
          name={name}
          value={value || ""}
          onChange={onChange}
          onBlur={onBlur}
          errorMessage={error?.message}
        />
      )}
    />
  );
};

However, this yield compilation errors. I get Type 'Control<F, any>' is not assignable to type 'Control<FieldValues, any>' error on control={control}

How can I properly type my component's prop ?

Here's a full code sandbox repro (look into NonWorkingForm.tsx file)

I spotted the issue (which is subtle).

I had to pass generic argument to ControllerProps like this:

type ControllerPropsEx<F extends FieldValues> = Omit<
  ControllerProps<F>, // Here, I added <F> parameter
  "render" | "control" | "name"
>;

// Base type for controlled inputs
type ControlledType<F extends FieldValues, T> = {
  name: Path<F>;
  control: Control<F>;
  controllerProps?: ControllerPropsEx<F>;
} & T;