Cannot get newly created option to auto select

[bradherman]

I'm trying to implement the AsyncCreateableSelect where I load all data via my API and create the new option via the API... After create, I want the select to have the newly created option selected but I can't seem to figure it out... I tried using useState to cache the newly created options and merge that into the API response, but to no avail

// ...
import { Controller } from 'react-hook-form'
import AsyncCreatableSelect from 'react-select/async-creatable'

type TextInputProps = {
  fieldName: string
  title?: string
  control: any
  dataFunc: Function
  required?: boolean
  createFunc: Function
}

export function AsyncCreateSelect({
  fieldName,
  title,
  control,
  dataFunc,
  required,
  setValue,
  createFunc,
}: TextInputProps): JSX.Element {
  const promiseOptions = (inputValue: string) => {
    return new Promise<any>((resolve) =>
      # dataFunc hits my API and returns an array of objects
      dataFunc({ query: inputValue }).then((data) => {
        return resolve(
          data.map((item) => ({ value: item.id, label: item.name })),
        )
      }),
    )
  }

  return (
        <Controller
          control={control}
          name={fieldName}
          render={({ field: { onChange, name, value } }) =>
            options && (
              <AsyncCreatableSelect
                cacheOptions={false}
                defaultOptions
                loadOptions={promiseOptions}
                onChange={(newValue: {
                  label: string
                  value: string
                }): void => {
                  setValue(fieldName, newValue.value)
                }}
                onCreateOption={(inputValue: string) => {
                  createFunc(inputValue).then((resp) => {
                    setValue(fieldName, resp.value)
                    // SOMETHING TO PUSH NEW OPTION INTO OPTS ARRAY AND SELECT?
                  })
                }}
              />
            )
          }
        />
  )
}