如何在react native. setSelectedCountry中更改props.cityname时使输入字段为空。setSelectedCountry保存所选城市名称，我希望在props.cityname值更改时使其为空

import React, {useRef, useState} from 'react';
import {
  FlatList,
  Image,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

const Test = props => {
  const [search, setSearch] = useState('');

  const [clicked, setClicked] = useState(false);

  const [data, setData] = useState(props.cityNames);

  const [selectedCountry, setSelectedCountry] = useState('');

  const searchRef = useRef();

  const onSearch = search => {
    if (search !== '') {
      const tempData = data.filter(item => {
        return item.value.toLowerCase().indexOf(search.toLowerCase()) > -1;
      });
      setData(tempData);
    } else {
      setData(props.cityNames);
    }
  };

  const isFound = data.some(element => {
    if (element.value === selectedCountry) {
      return true;
    }
    return false;
  });

  // React.useEffect(() => {
  //   setSelectedCountry('');
  // }, [isFound]);

  return (
    <View>
      <TouchableOpacity
        style={{
          paddingHorizontal: 16,
          paddingVertical: 20,
          borderRadius: 10,
          backgroundColor: '#F2F4F7',
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
        onPress={() => {
          setClicked(!clicked);
        }}>
        <Text style={{fontWeight: '600'}}>
          {selectedCountry == '' ? 'Select Country' : selectedCountry}
        </Text>
        {clicked ? (
          <Image
            source={require('./upload.png')}
            style={{width: 20, height: 20}}
          />
        ) : (
          <Image
            source={require('./dropdown.png')}
            style={{width: 20, height: 20}}
          />
        )}
      </TouchableOpacity>
      {clicked ? (
        <View
          style={{
            marginTop: 10,
            backgroundColor: '#F2F4F7',
            borderRadius: 10,
            paddingHorizontal: 0,
            paddingVertical: 0,
            borderColor: '#F2F4F7',
            maxHeight: 300,
          }}>
          <TextInput
            placeholder="Search.."
            value={search}
            ref={searchRef}
            onChangeText={txt => {
              onSearch(txt);
              setSearch(txt);
            }}
            style={{
              width: '90%',
              alignSelf: 'center',
              borderWidth: 1,
              borderColor: 'white',
              borderRadius: 10,
              marginTop: 20,
              paddingLeft: 16,
            }}
          />

          <FlatList
            nestedScrollEnabled
            data={data}
            renderItem={({item, index}) => {
              return (
                <TouchableOpacity
                  style={{
                    width: '85%',
                    alignSelf: 'center',
                    paddingVertical: 16,
                    justifyContent: 'center',
                  }}
                  onPress={() => {
                    setSelectedCountry(item.value);
                    setClicked(!clicked);
                    onSearch('');
                    setSearch('');
                  }}>
                  <Text style={{fontWeight: '600'}}>{item.value}</Text>
                </TouchableOpacity>
              );
            }}
          />
        </View>
      ) : null}
    </View>
  );
};

export default Test;

我想添加最大高度，这样下拉列表就不会向下移动
如果我删除了最大高度，那么它将解决问题，但下拉字段的长度很大，所以我需要很好的解决方案