react-select async creatable does not recommend

Solution 1:

On the documentation you linked, it includes the "filterColors" function. You need to implement a similar or equivalent function, and wrap the return value of the "loadOptions" function in it, the same way they do.

import React, { Component } from 'react';

import AsyncCreatableSelect from 'react-select/async-creatable';
import { colourOptions } from '../data';

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 WithPromises extends Component<*, State> {
  render() {
    return (
      <AsyncCreatableSelect
        cacheOptions
        defaultOptions
        loadOptions={promiseOptions}
      />
    );
  }
}

Refer to "promiseOptions" above, which is the function used for "loadOptions".The inputValue returned is wrapped in the "filterColors" function, which does the sorting.