Unable to get the correct type for onChange argument when using CreatableSelect

[weehongkoh]

I'm using CreateableSelect dropdown that allows the user to create a new option.
Attached code below.

export interface CategoryOptionProp {
  label: string;
  value: number;
};

<CreatableSelect
    ...
    register("category") // From React Hook Forms
    onChange={(newValue: SingleValue<CardOptionProp>) => {
      if (newValue) {
        field.onChange(newValue);
        setSelectedCategoryOption({
          label: newValue.label,
          value: newValue.value,
        });
      }
    }}
    ...
  />

I tried to set the onChange method with the type SingleValue<CardOptionProp> to update the selected value setValue() provided by React Hook Form and also update the selected value and display it on the CreateableSelect selected options field.

However, I received a lint error complaint Type '(newValue: SingleValue<CardOptionProp>) => void' is not assignable to type '(newValue: SingleValue<CategoryOptionProp> | MultiValue<CategoryOptionProp>, actionMeta: ActionMeta<CategoryOptionProp>) => void', which I don't know who to resolve it.

I also tried to include the MultiValue<CategoryOptionProp> based on the suggested lint error. However, it showed me a different prompt error which didn't make sense to me, and the problem was solved after I changed the type to SingleValue.

Property 'label' does not exist on type 'CategoryOptionProp | MultiValue<CategoryOptionProp>'.
  Property 'label' does not exist on type 'MultiValue<CategoryOptionProp>'.

But I would like to avoid any type as much as possible. May I know if there's any other workaround?

If you would prefer to read the entire source code,
This is the link to the file itself.
https://github.com/weehongayden/finance-app/blob/expense/src/components/expenses/Form.tsx#L142