react-hook-form v7 `resolver` type error when using `NestedValue`

I have an interface for the form like this:

interface FormData {
  name: string;
  age: number | "";
  hobbies: string[];
}

and then the hook setup:

  const { register, control, handleSubmit } = useForm<FormData>({
    defaultValues: {
      name: "",
      age: "",
      hobbies: []
    },
    resolver: yupResolver(schema)
  });
  const { errors } = useFormState({ control });
  const formData = useWatch({ control });

and on my view it'll look like this:

    <div className="App">
      <TextField
        {...register("name")}
        // inputRef={register('name').ref}
        label="Name"
        className="field"
        error={Boolean(errors.name)}
        helperText={errors.name?.message}
      />
      <TextField
        {...register("age")}
        label="Age"
        className="field"
        error={Boolean(errors.age)}
        helperText={errors.age?.message}
      />
      <Controller
        name="hobbies"
        control={control}
        render={({ field: { value, onChange } }) => (
          <Autocomplete
            className="field"
            multiple
            options={["Swim", "Basketball", "Sleep", "Run"]}
            value={value}
            onChange={(_, newValue) => onChange(newValue)}
            getOptionLabel={(option) => option}
            renderInput={(params) => (
              <TextField
                {...params}
                label="Hobbies"
                error={Boolean(errors.hobbies)}
                helperText={errors.hobbies?.message} // `message` got error from typescript 
              />
            )}
          />
        )}
      />

      <Button
        variant="contained"
        onClick={handleSubmit(
          () => console.log("success"),
          () => console.log("invalid")
        )}
      >
        Submit
      </Button>
    </div>

so with this setup, in the helperText for hobbies where I put my message if there's any error, typescript highlighted the message saying Property 'message' does not exist on type 'FieldError[]'

and then I do some research and found this NestedValue type for arrays and nested objects. so I change the FormData interface to be like this:

interface FormData {
  name: string;
  age: number | "";
  hobbies: NestedValue<string[]>;
}

the error in helperText earlier are gone, BUT, now I got a new error in resolver inside useForm with this error message:

Type '<TFieldValues extends FieldValues, TContext>(values: UnpackNestedValue<TFieldValues>, context: TContext, options: ResolverOptions<TFieldValues>) => Promise<...>' is not assignable to type 'Resolver<FormData, object>'.
  Types of parameters 'options' and 'options' are incompatible.
    Type 'ResolverOptions<FormData>' is not assignable to type 'ResolverOptions<{ name: string; age: number | ""; hobbies: string[]; }>'.
      Type 'string[]' is not assignable to type 'NestedValue<string[]>'.
        Property '[$NestedValue]' is missing in type 'string[]' but required in type '{ [$NestedValue]: never; }'.ts(2322)
form.d.ts(47, 5): The expected type comes from property 'resolver' which is declared here on type 'Partial<{ mode: keyof ValidationMode; reValidateMode: "onBlur" | "onChange" | "onSubmit"; defaultValues: { name?: string; age?: number | ""; hobbies?: string[]; }; resolver: Resolver<FormData, object>; ... 5 more ...; delayError: number; }>'

What should I do? I have created a sandbox for this issue.