Unable to access state variable declared inside useEffect - react-native

Question

I have a react native screen where I am calling an API on useEffect and setting two state variables using hooks, i.e. cityList, filteredCityList. filteredCityList is bind to autocomplete dropdown. On change of this dropdown, a function called filterCity gets called. I am unable to access the cityList inside this function.
Please advise what am I missing here.
import React, {useCallback, useEffect, useState} from 'react';
import {View, StyleSheet} from 'react-native';
import {Button, Card, Portal, Text, Modal, FAB} from 'react-native-paper';
import {AutocompleteDropdown} from 'react-native-autocomplete-dropdown';
import Icon from 'react-native-vector-icons/Feather';
import {getCities} from '../API/api';
import {useFocusEffect} from '#react-navigation/native';
const AddHospital = () => {
const [selectedCity, setSelectedCity] = useState(null);
const [cityListFiltered, setCityListFiltered] = useState([]);
const [cityList, setCityList] = useState([]);
const [cityDDLoading, setCityDDLoading] = useState(false);
const [selectedCityError, setSelectedCityError] = useState(false);
console.log('reloading');
const filterCity = q => {
console.log(q);
console.log('City List', cityList);
};
const loadCities = async () => {
setCityDDLoading(true);
var citiesResponse = await getCities();
if (citiesResponse.responseData) {
var cities = citiesResponse.responseData.records.map(item => ({
id: item.id,
title: item.cityname,
}));
console.log('setting cities', cities);
setCityList(cities);
// setCityListFiltered(cities);
// setCityDDLoading(false);
} else {
console.log('Failed to load cities');
}
};
useEffect(() => {
loadCities();
}, []);
return (
<View>
<Card style={styles.container}>
<Card.Title title="Select Hospital"></Card.Title>
<Card.Content>
<AutocompleteDropdown
clearOnFocus={false}
closeOnBlur={true}
closeOnSubmit={false}
onSelectItem={item => {
item && setSelectedCity(item);
}}
dataSet={cityListFiltered}
debounce={600}
onChangeText={text => filterCity(text)}
suggestionsListMaxHeight={120}
loading={cityDDLoading}
useFilter={false} // prevent rerender twice
textInputProps={{
placeholder: 'Select City',
autoCorrect: false,
autoCapitalize: 'none',
style: {
// borderRadius: 25,
backgroundColor: '#f6f6f6',
color: 'black',
paddingLeft: 18,
borderWidth: 1,
borderColor: selectedCityError ? 'red' : 'gray',
borderStyle: 'solid',
},
placeholderTextColor: 'black',
}}
rightButtonsContainerStyle={{
// borderRadius: 25,
right: 8,
height: 30,
top: 10,
alignSelfs: 'center',
backgroundColor: '#f6f6f6',
// backgroundColor: "#383b42"
}}
inputContainerStyle={{
backgroundColor: 'transparent',
zIndex: 0,
}}
suggestionsListContainerStyle={
{
//backgroundColor: "#383b42"
//color: '#fff'
// zIndex: 1000
}
}
containerStyle={{
flexGrow: 1,
flexShrink: 1,
marginBottom: 100,
marginTop: 10,
zIndex: 0,
}}
renderItem={(item, text) => (
<Text style={{color: 'black', padding: 15}}>{item.title}</Text>
)}
ChevronIconComponent={<Icon name="chevron-down" size={24} />}
ClearIconComponent={<Icon name="x" size={18} />}
inputHeight={50}
showChevron={true}
showClear={true}
// style={styles.autoComplete}
/>
</Card.Content>
</Card>
<Text>{cityList.length}</Text>
</View>
);
};
export default AddHospital;
const styles = StyleSheet.create({
container: {
flex: 0,
margin: 10,
},
});