Как дождаться выполнение функции которая ничего не возвращает но меняет значение данных?

У меня есть вот такой реакт-компонент который получает данные с помощью апи. Суть в том что я хочу дождаться выполнения функции API а затем уже выполнить FilterCities

function CustomAsyncInput ({value,hendleChange,label,placeholder,}){

const [AutocompleteArr,setAutoCompleteArr] = useState([])

const filterCities = (inputValue) => {
    return AutocompleteArr.length?AutocompleteArr.filter(i =>
        i.label.toLowerCase().includes(inputValue.toLowerCase())
    ):[];
};
const promiseOptions =async inputValue => {
    if(inputValue){
        await Api(inputValue)
        return filterCities(inputValue)
    }
};

const Api = async (params)=>{
    try {
        const url = '/api/autocomplete'+`?query=${params}`
        const response = await axiosCustom.get(url);
        const { data } = response;
        setAutoCompleteArr(data.response.items)
    } catch (e) {

    }
}    

return (
    <div className={"custom-select-wrap"}>
        {label?<label className={"custom-select-label"}>
            {label}
        </label>:null}
        <AsyncSelect
            dropdownIndicator={false}
            border={0}
            placeholder={placeholder}
            className="CustomAsyncSelect"
            classNamePrefix="custom-async-select"
            cacheOptions
            value={value}
            defaultOptions={AutocompleteArr}
            loadOptions={promiseOptions}
        />
    </div>

    )
}



export default CustomAsyncInput