How to set value of AsyncSelect outside of the component?

I have read all the documentation of AsyncSelect and Select but I didn’t read anything regarding this matter. The problem arose after upgrading from V1 to V3. In V1, I could set value property (a simple value or string) and this would trigger the async loading procedure which would get the right value object (label and value). But, in V3, you should set value with the whole structure, eg, {label: xxx, value: yyy} in order to show it correctly.

For instance, we have this sample:

import React, { Component } from 'react';
import AsyncSelect from 'react-select/async';
import { colourOptions } from '../data';

type State = {
  inputValue: string,
};

const filterColors = (inputValue: string) => {
  return colourOptions.filter(i =>
    i.label.toLowerCase().includes(inputValue.toLowerCase())
  );
};

const promiseOptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(filterColors(inputValue));
    }, 1000);
  });

export default class AsyncMulti extends Component<*, State> {
  state = { inputValue: '' };
  handleInputChange = (newValue: string) => {
    const inputValue = newValue.replace(/\W/g, '');
    this.setState({ inputValue });
    return inputValue;
  };
  render() {
    return (
      <AsyncSelect
        isMulti
        cacheOptions
        defaultOptions
        value = {1} // this won't work
        value = {{value: 1, label: "black"}}
        loadOptions={promiseOptions}
      />
    );
  }
}

All the logic of loading colors is inside the component. In order to set a value from outside, I would have to (in an external procedure) load the array and search for the value which, I think, would duplicate code unnecessarily.

Is there a way to set a value and this would trigger internal loading procedure in order to search for the correct pair?

[stefanoverna]

This is what works for me:

import AsyncSelect from 'react-select/async';
import { client } from 'api/dato';
import debounce from 'debounce-async';
import { useMemo, useState } from 'react';

const isOptionSelected = (option, values) => {
  return values.some(({ value }) => option.value === value);
};

export default function AccountInput({ field, form }) {
  const [lastOptions, setLastOptions] = useState([]);

  const loadOptions = useMemo(() => {
    return debounce(async (inputValue) => {
      const { data } = await client
        .url('/accounts')
        .query({ q: inputValue, id: field.value })
        .get()
        .json();

      const options = data.map((account) => ({
        value: account.id,
        label: `${account.attributes.email} (#${account.id})`,
      }));

      setLastOptions(options);

      return options;
    }, 300);
  }, [field.value, setLastOptions]);

  return (
    <div>
      <AsyncSelect
        cacheOptions
        loadOptions={loadOptions}
        defaultOptions
        isOptionSelected={isOptionSelected}
        value={lastOptions.find((option) => option.value === field.value)}
        onChange={(option) => {
          form.setFieldValue(field.name, option.value);
        }}
      />
    </div>
  );
}

[MarcosCunhaLima]

Yes, this is what I’ve done. But I have to (as you said) change my query (outside of the component) and manually craft a label/value object. The problem with this approach is that I had to duplicate this query (one query to search for the label before creating the component) and the other inside the component to loadOptions. Before this version, I could just set the value and it will trigger loadOptions and make this label/value automatically.