react-native-maps: zIndex doesn't work when the map moves in iOS 11

The yellow marker is ever in foreground in others version or in Android.

In iOS 11 only works when you press in the marker but doesn’t work when change the zIndex by state for example.

Somebody know how I can fix this?

My MapView code:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions
} from 'react-native';
const { width, height } = Dimensions.get('window');
import MapView, { PROVIDER_GOOGLE, PROVIDER_DEFAULT } from 'react-native-maps';
const { Marker } = MapView;
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0
    };
    this.markers = [
      { id: 1, latitude: 43.152, longitude: -1.30051 },
      { id: 2, latitude: 43.1525, longitude: -1.30201 },
      { id: 3, latitude: 43.15264, longitude: -1.30025 },
      { id: 5, latitude: 43.1527, longitude: -1.30201 },
      { id: 6, latitude: 43.1525, longitude: -1.3001 },
      { id: 7, latitude: 43.1527, longitude: -1.30043 },
      { id: 8, latitude: 43.1526, longitude: -1.300531 },
      { id: 9, latitude: 43.1525, longitude: -1.30011 },
      { id: 10, latitude: 43.1521, longitude: -1.30062 },
      { id: 4, latitude: 43.152, longitude: -1.30083 }
    ];
  }
  render() {
    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_DEFAULT}
          style={{ flex: 1 }}
          initialRegion={{
            latitude: 43.153,
            longitude: -1.3,
            longitudeDelta: 20,
            latitudeDelta: 15
          }}
          minZoomLevel={15}
          ref={ref => { this.map = ref }}>
          {this.markers.map((marker, i) => {
            const selected = this.state.index == i;
            return (
              <Marker
                key={'m' + marker.id}
                coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
                onPress={() => this.setState({ index: i })}
                zIndex={selected ? 2 : 1}>
                <View style={styles.marker}>
                  <View style={styles.bubbleContainer}>
                    <View style={[styles.bubble, selected && styles.selected]}>
                      <Text style={styles.txt}>test</Text>
                    </View>
                  </View>
                </View>
              </Marker>
            );
          })}
        </MapView>
        <TouchableOpacity onPress={() => this.setState({ index: Math.round(Math.random() * 10) })}>
          <Text>Random select</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    height
  },
  marker: {
    width: 50
  },
  bubbleContainer: {
    flexDirection: 'column',
    alignSelf: 'flex-start',
    backgroundColor: 'transparent',
    height: 45,
  },
  bubble: {
    flex: 0,
    flexDirection: 'row',
    alignSelf: 'flex-start',
    justifyContent: 'center',
    padding: 10,
    borderRadius: 10,
    borderColor: '#D1D1D1',
    borderWidth: 1,
    width: 49,
    backgroundColor: '#fff',
  },
  txt: {
    color: '#000',
  },
  selected: {
    backgroundColor: '#F7FF00'
  },
});

RN: 0.48.4 / 0.50.4 RN-maps: 0.16.4 / 0.18.1 OS: iOS 11 / 11.1