I am having an issue on implementing the multiple select component from NextUI with React Hook Form. I am displaying profile data and populate the select box with the selected values from the data. Now I got a typescript error like below.

Type ‘{ children: (item: Option) => Element; onChange: (…event: any[]) => void; onBlur: Noop; value: ProfileGroup[]; disabled?: boolean | undefined; … 7 more …; selectedKeys: string[]; }’ is not assignable to type ‘Props<Option>’.
Types of property ‘value’ are incompatible.
Type ‘ProfileGroup[]’ is not assignable to type ‘string | number | readonly string[] | undefined’.
Type ‘ProfileGroup[]’ is not assignable to type ‘readonly string[]’.
Type ‘ProfileGroup’ is not assignable to type ‘string’.

This is my countryGroupOptions

export const countryGroupOptions: Option<string>[] = [
  { value: 'US 1', label: 'US 1' },
  { value: 'US 2', label: 'US 2' },
  { value: 'US 3', label: 'US 3' },
  { value: 'Reserve', label: 'Reserve' },
]

and a bit of my code related to my issue on the component

const ProfileDetails: React.FC<ProfileDetailProps> = ({ profileId }) => {
  const {
    register,
    handleSubmit,
    setValue,
    watch,
    reset,
    control,
    formState: { errors }
  } = useForm<Profile>({
    defaultValues: profile
  })
  const [countries, setCountries] = useState<string[]>([])

  const onGroupChanged = (groups: string[]) => {
    const profileGroups: ProfileGroup[] = []

    forEach(groups, (item: string) => {
      const [countryCode, groupName] = item.split(" ")

      profileGroups.push({
        profile_id: profile?.id,
        country_code: countryCode,
        group: groupName
      })
    })

    setValue("groups", profileGroups)
    setCountries(groups)
  }

  useEffect(() => {
    if (profile) {
      reset(profile)
      setCountries(profile.formattedGroups ?? [])
    }
  }, [profile, reset, setValue])

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="groups"
          control={control}
          rules={{ required: "Country group is required" }}
          render={({ field }) => (
            <Select
              items={countryGroupOptions}
              label="Country"
              labelPlacement="outside"
              placeholder="Select"
              selectionMode="multiple"
              selectedKeys={countries}
              onChange={onGroupChanged}
              {...field}
            >
              {(item) => <SelectItem key={item.value}>{item.label}</SelectItem>}
            </Select>
          )}
        ></Controller>
      </form>
    </div>
  )
}

I’ve been searching on ways how to make this work but to no avail.

I tried this but still doesn’t work

<Controller
  name="groups"
  control={control}
  render={({ field }) => (
    <Select
      items={countryGroupOptions}
      label="Country"
      labelPlacement="outside"
      placeholder="Select"
      selectionMode="multiple"
      selectedKeys={field.value?.map((group: ProfileGroup) => `${group.country_code} ${group.group}`) ?? []}
      onSelectionChange={() => onGroupChanged(field)}
      {...field}
    >
      {(item) => (
        <SelectItem key={item.value}>
          {item.label}
        </SelectItem>
      )}
    </Select>
  )}
/>