AsyncSelect from react-select returning [object Object] and not the desired value

[jacobgranberry]

Hey there - working on an issue with the react-select AsyncSelect component that loads options from an API and setting the value. I can't seem to get the value to return correctly - it returns the string thats [object Object]. Wondering if I can get a second set of eyes on this? The onChange handler also doesn't seem to fire.

The resulting value on submit:

{
  businessCategory: "[object Object]"
}

My component

    <Controller
            control={control}
            name="businessCategory"
            as={
              <AsyncSelect
                className="react-select-container"
                loadOptions={v => handleAutocompleteLookup(v)}
                onInputChange={handleCategoryInputChange}
                getOptionLabel={option => option.name}
                getOptionValue={option => option.fullName}
              />
            }
         />

My handleChange function.

  const handleCategoryInputChange = newValue => {
    return setValue('businessCategory', newValue, true);
  };

And my data is an array of objects with the following shape:

{
  fullName: "DJ service"
  id: "gcid:dj"
  name: "DJ service"
  publisher: "GMB"
}

[jacobgranberry]

Fixed this by approaching it with a custom register via react-hook-form as seen here:

https://react-hook-form.com/get-started#Registerfields

[bluebill1049]

you can use render prop from Controller as well (if you are using v6).