How do you implement AsynSelect with isMilti in Typescript? #react-select - react-select

Question

I can't seem to get isMulti to work with Aysync select. I've tried a number of iterations but nothing works. Below is my code. Once I uncomment the isMulti line, thats whne things break. I tried to create a new array type to see if that helps but it doesn't.
I also have another issue where the options box doesn't load the options from the promise function but only does so when I delete a character from the input (it's using the cached results to populated the dropdown at that point).
import { useState } from 'react';
import { FunctionComponent } from 'react';
import AsyncSelect from 'react-select/async';
import ValueType from 'react-select';
import { getGoogleAutoComplete } from './services';
import map from '../../assets/map.svg';
import './LocationInput.styles.scss';
type OptionType = {
value: string;
label: string;
}
type OptionTypeArray = Array<OptionType>;
const LocationInput: FunctionComponent = () => {
const [locations, setLocations] = useState<ValueType<OptionType | OptionTypeArray>>();
const [query, setQuery] = useState("");
const handleChange = (option: ValueType<OptionType | OptionTypeArray> | null) => {
if (option != null){setLocations(option)};
console.log('im in handleChange!')
console.log(option)
};
async function promiseOptions(): Promise<any>{
return await getGoogleAutoComplete(query);
}
return (
<div className='location-input-container'>
<div className='map-icon'>
<img src={map} alt=''/>
</div>
<div className='location-input'>
<AsyncSelect
//isMulti={true}
cacheOptions
value={locations}
defaultOptions
placeholder='Enter a City or ZIP code'
onChange={(option) => handleChange(option)}
onInputChange={(value) => setQuery(value)}
closeMenuOnSelect={true}
noOptionsMessage={() => 'No Match Found'}
isClearable={true}
loadOptions={promiseOptions} />
</div>
</div>
)
}
export default LocationInput;

Answer 1

I was able to find a solution. However, I had to use Type Assertion to make it workout which isn't the ideal approach. If anyone has any other suggestions I'd greaty appreacite it.
import { useState, FunctionComponent } from 'react';
import AsyncSelect from 'react-select/async';
import { getGoogleAutoComplete } from './services';
import OptionTypeBase from 'react-select';
import { OptionsType } from 'react-select/src/types';
import makeAnimated from "react-select/animated";
import map from '../../assets/map.svg';
import './LocationInput.styles.scss';
const LocationInput: FunctionComponent = () => {
const [locations, setLocations] = useState<OptionsType<OptionTypeBase>>();
const [query, setQuery] = useState("");
const handleChange = (option: OptionsType<OptionTypeBase>) => {
setLocations(option);
console.log('im in handleChange!')
console.log(option)
};
async function promiseOptions(value:string): Promise<any>{
return new Promise(resolve => resolve(getGoogleAutoComplete(value)));
}
//get animated components wrapper
const animatedComponents = makeAnimated();
return (
<div className='location-input-container'>
<div className='map-icon'>
<img src={map} alt=''/>
</div>
<div className='location-input'>
<AsyncSelect
isMulti={true}
components={animatedComponents}
cacheOptions
placeholder='Enter a City or ZIP code'
onChange={(option) => handleChange(option as OptionsType<OptionTypeBase>)}
closeMenuOnSelect={true}
noOptionsMessage={() => 'No Match Found'}
loadOptions={promiseOptions} />
</div>
</div>
)
}
export default LocationInput;