无法点击 TouchableWithoutFeedback 内的下拉选择器

如何解决无法点击 TouchableWithoutFeedback 内的下拉选择器

我正在尝试在提升的 react-native-dropdown-picker 容器内使用 TouchableWithoutFeedback 实现下拉选择器。但是，每当我点击选择器内的一个项目时，就会触发下面的 TouchableWithoutFeedback 组件。我重新创建了一个简单的 Snack Expo 以供参考。我对容器和下拉菜单的样式如下：

container: {
    backgroundColor: 'white',borderRadius: 16,paddingVertical: 17,paddingHorizontal: 20,flexDirection: 'row',justifyContent: 'space-between',width: wp('90%'),shadowColor: '#0d263a',shadowOpacity: 0.15,shadowOffset: { width: 0,height: 15 },elevation: 20,borderWidth: 2,marginBottom: 12,zIndex: -1,},

下拉菜单样式为：

  container: {
    width: '50%',selectedItemContainer: {
    backgroundColor: palette.lightBlue,style: {
    flexDirection: 'row',alignItems: 'center',width: '100%',height: 50,borderRadius: 8,borderWidth: 1,borderColor: palette.lightBlue,paddingHorizontal: 10,backgroundColor: palette.lightBlue,label: {
    flex: 1,color: palette.darkBlue,labelContainer: {
    flex: 1,arrowIcon: {
    width: 20,height: 20,tickIcon: {
    width: 20,listBody: {
    height: '100%',listBodyContainer: {
    flexGrow: 1,dropDownContainer: {
    position: 'absolute',backgroundColor: palette.white,borderColor: palette.white,overflow: 'hidden',zIndex: 9999,borderBottomEndRadius: 10,modalContentContainer: {
    flexGrow: 1,listItemContainer: {
    flexDirection: 'row',justifyContent: 'center',height: 40,listItemLabel: {
    flex: 1,textAlign: 'center',itemSeparator: {
    height: 1,flatListContentContainer: {
    flexGrow: 1,

我不确定错误来自哪里，是因为海拔吗？