Текст автозаполнения не появляется сверху при выборе данных

Question

Я новичок, чтобы реагировать на нативный. Я работаю над AutoCompleteTextView .У меня есть один файл JSON, мне нужно, чтобы отобразить название страны в режиме автозаполнения.У меня отображаются названия стран всех стран.Но при выборе страны это не выбор.Файл json, который я показываю , равен .

. Мой код для автозаполнения:

  render() {
    const { query } = this.state;

    return (
      <KeyboardAwareScrollView
    innerRef={ref => this.scrollView = ref} //... Access the ref for any other functions here
    contentContainerStyle={{flex: 1}}>
        <View>
          <View style={styles.autocompleteContainer}>
          <Autocomplete
    data={timezones}
    defaultValue={query}
    autoCapitalize="none"
    autoCorrect={false}
    onChangeText={text => this.setState({ query: text })}
    placeholder="Enter Country"

    renderItem={({ name, latlng }) => {

        const prodNames = latlng.map(item => item.prodNames);
        <TouchableOpacity onPress={() => this.setState({ query: text })}>
         <Text>{name} {prodNames}</Text >

        </TouchableOpacity>
        }}

    />  
          </View>
          <View>
            <Text>Some content</Text>
          </View>