I have set a GooglePlacesAutocomplete input within my react native component, but it seems to not work has I spected, the problem I see is that when I click to any suggestion, instead of call the onPress prop, I am calling whatever is behind my list
I wonder if my problem is because of the visibility of the map, or if I ser something wrong, please let me know if this is enougth information.

<Modal
            animationType="slide"
            transparent
            visible={mapVisible}
            onRequestClose={() => {
              setMapVisible(!mapVisible);
            }}>
            <SafeAreaView style={{flex: 1}}>
            <View style={styles.autocompleteContainer}>
              <GooglePlacesAutocomplete
                placeholder="Busca tu negocio desde aquí..."
                onPress={(data, details = null) => {
                  console.log(data, details);
                }}
                
                query={{
                  key: netData.googleMapsApi,
                  language: i18n.language as Language,
                  location: `${origin?.latitude} ${origin?.longitude}`,
                  radius: 15000,
                  strictbounds: true,
                }}
                minLength={2}
                fetchDetails
                styles={{
                  container: styles.autocomplete,
                  textInputContainer: styles.textInputContainer,
                  textInput: styles.textInput,
                  listView: styles.listView,
                }}
                enablePoweredByContainer={false}
              />
            </View>
              <View style={styles.viewPhotos2}>
                <View style={styles.restOfContent}>
                  <InputLabel text={t('dataNegocio:UbicacionDescripcion')} />
                  <View style={styles.viewCheckbox}>
                    <CheckBox
                      disabled={false}
                      value={checkUbiActual}
                      tintColors={checkBoxAndroidColors}
                      onCheckColor={checkBoxIOSColors}
                      onTintColor={checkBoxIOSColors}
                      onValueChange={newValue => setCheckUbiActual(newValue)}
                      style={Platform.OS === 'ios' ? styles.checkBox : {}}
                    />
                    <InputLabel text={t('dataNegocio:UbicacionCheckBox')} style={styles.subTitle} />
                    <SvgXml xml={MarketIconMe} height={25} width={25} />
                  </View>
                </View>
                <TouchableOpacity
                  style={[styles.btn, styles.btn2]}
                  onPress={() => {
                    if (checkUbiActual) {
                      setMarker(
                        markerOrigin
                          ? markerOrigin
                          : {
                              longitude: -1,
                              latitude: -1,
                            },
                      );
                    }
                    setMapVisible(false);
                  }}>
                  <Text style={{color: theme.colors.label}}>
                    {marker
                      ? t('dataNegocio:GuardarMapa')
                      : checkUbiActual
                      ? t('dataNegocio:GuardarMapa')
                      : t('dataNegocio:CerrarMapa')}
                  </Text>
                </TouchableOpacity>
              </View>
              {origin ? (
                <MapView
                  style={styles.map}
                  initialRegion={{
                    latitude: origin.latitude,
                    longitude: origin.longitude,
                    latitudeDelta: 0.09,
                    longitudeDelta: 0.04,
                  }}
                  onPress={event => {
                    const newCoords = {
                      longitude: event.nativeEvent.coordinate.longitude,
                      latitude: event.nativeEvent.coordinate.latitude,
                    };
                    setOnChangeMarker(newCoords);
                  }}                  
                  userInterfaceStyle="light">
                  {markerOrigin ? (
                    <Marker coordinate={markerOrigin}>
                      <SvgXml xml={MarketIconMe} width={30} height={30} />
                    </Marker>
                  ) : null}
                  {markerOrigin?.longitude === marker?.longitude &&
                  markerOrigin?.latitude === marker?.latitude ? null : marker ? (
                    <Marker coordinate={marker}>
                      <SvgXml xml={MarkerIcon} width={30} height={30} />
                    </Marker>
                  ) : null}
                </MapView>
              ) : (
                <View style={[StyleSheet.absoluteFill, styles.loadingContainer]}>
                  <ActivityIndicator
                    size="large"
                    color={Platform.OS === 'android' ? theme.colors.primaryBlue : undefined}
                  />
                </View>
              )}
            </SafeAreaView>
          </Modal>

          <InputLabel text={t('dataNegocio:Ubicacion')} required />

          <TouchableOpacity
            style={styles.photoMarker}
            onPress={() => {
              getLocation();
            }}>
            <SvgXml xml={MarkerIcon} height={50} width={50} />
          </TouchableOpacity>

          <Modal
            visible={showConfirmModal}
            onRequestClose={() => {
              setShowConfirmModal(false);
              setOnChangeMarker(null);
            }}
            transparent
            animationType="slide">
            <View style={styles.centeredView}>
              <View style={styles.modalView}>
                <Text style={{ marginBottom: 20 }}>¿Desea cambiar su negocio a esta nueva ubicación?</Text>
                <View style={styles.buttonRow}>
                  <TouchableOpacity
                    style={[styles.button, styles.confirmButton]}
                    onPress={() => {
                      if (onChangeMarker) {
                        setMarker(onChangeMarker);
                      }
                      setShowConfirmModal(false);
                      setOnChangeMarker(null);
                    }}>
                    <Text style={styles.buttonText}>Confirmar</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[styles.button, styles.cancelButton]}
                    onPress={() => {
                      setShowConfirmModal(false);
                      setOnChangeMarker(null);
                    }}>
                    <Text style={styles.buttonText}>Cancelar</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </Modal>

I already tried to use different zIndex whitin the list to make sure that is above the map or anything else, but this didnt worked, honestly I dont understand what is wrong