react-select and typescript: Type 'string' is not assignable to type 'ValueType<OptionTypeBase>'

You need to set a value from your options array as the current value of Select component.

This however is not the only problem because the type signature of the onChange function is somewhat confusing. You'll need to define a type for the options and use `ValueType´ in the onChange function signature.

Here's a working example

type OptionType = {
  value: string;
  label: string;
};

const options: OptionType[] = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState<ValueType<OptionType>>(options[0]);

  const handleChange = (option: ValueType<OptionType>) => {
    setSelectedOption(option);
  };

  return (
    <Select
      value={selectedOption}
      onChange={option => handleChange(option)}
      options={options}
    />
  );
};

More information about the issue https://github.com/JedWatson/react-select/issues/2902

Sandbox with the code above https://codesandbox.io/s/angry-frost-5bh1o

  <Select
    value={selectedOption}
    onChange={(option) => handleChange(option)}
    options={options}
  />

The issue is value must be an entry within options. You have set the state to the string "chocolate" and it's throwing an error indicating that isn't of the same type.

If you update your state to something like:

  const [selectedOption, setSelectedOption] = useState(options[0]);

It'll now work.

import AsyncSelect from 'react-select/async';  

interface ColourOption {
    readonly value: string;
    readonly label: string;
    readonly color: string;
    readonly isFixed?: boolean;
    readonly isDisabled?: boolean;
  }
  
  const colourOptions: readonly ColourOption[] = [
    { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
    { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
    { value: 'purple', label: 'Purple', color: '#5243AA' },
    { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
    { value: 'orange', label: 'Orange', color: '#FF8B00' }
  ];
  

  const filterColors = (inputValue: string) => {
    return colourOptions.filter((i) =>
      i.label.toLowerCase().includes(inputValue.toLowerCase())
    );
  };
  
  const promiseOptions = (inputValue: string) =>
    new Promise<ColourOption[]>((resolve) => {
      setTimeout(() => {
        resolve(filterColors(inputValue));
      }, 1000);
    });    


<AsyncSelect 
    isMulti
    cacheOptions
    defaultOptions
    placeholder ={"Start typing to add another conditions"}
    loadOptions={promiseOptions}
    />

Try to do something like this:

type TSelectOption = {
    value: string;
    label: string;
};

const options: TSelectOption[] = [
    {value: 'chocolate', label: 'Chocolate'},
    {value: 'strawberry', label: 'Strawberry'},
    {value: 'vanilla', label: 'Vanilla'},
];

const MyComponent = () => {

const [selectedOption, setSelectedOption] = useState<Pick<TSelectOption, 'value'>>('chocolate');

const handleChange = (option: SingleValue<Pick<TSelectOption, 'value'>>) => {
    setSelectedOption(option);
};

   return (
       <Select
           value={selectedOption}
           onChange={(option) => handleChange(option)}
           options={options}
      />
   );

};

the reson why it's happenning it because SingleValueType is an string or number [] array.

To fix this you have to change your input fonction type to this: (string | number)[] and it will start to compile