react-native-maps: Marker with custom images does not show callout sometimes. Callout appears behind markers.

I’m trying to use markers with custom images. Out of 3 markers, only one shows callout when I tap on it. And the callout appears behind the other markers.

The same problem occurs if I use my custom markers. It works just fine if I use the default pin marker.

Code

export default class MockMapApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      places: [
        {
          title: 'A',
          latitude: -31.433333,
          longitude: 152.900000,
        },
        {
          title: 'B',
          latitude: -31.428564,
          longitude: 152.912478,
        },
        {
          title: 'C',
          latitude: -31.440208,
          longitude: 152.918615,
        }
      ],
      region: {
        latitude: -31.433333,
        longitude: 152.900000,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }
    };
  }

  render() {
    return (
      <MapView
          style={{flex: 1}}
          region={this.state.region}
          onRegionChangeComplete={region => this.setState({region: region})}>

          {this.state.places.map((place, index) => {
            const coord = {latitude: place.latitude, longitude: place.longitude};

            return (
              <MapView.Marker
                key={index} identifier={`${index}`}
                coordinate={coord}
                image={require('./images/planned-icon.png')}
                onPress={() => console.log(`marker ${place.title} pressed`)}>

                {/* <MyMarkerView identifier={`${index}`} coordinate={coord} title={place.title}/> */}

                <MapView.Callout style={{width: 300, height: 100}}>
                  <MyCalloutView title={place.title}/>
                </MapView.Callout>

              </MapView.Marker>
            );
          })}

        </MapView>
    );
  }
}

/*
class MyMarkerView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{
          width: 44, height: 44,
          flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
          backgroundColor: 'transparent'
        }}>
        <View style={{
            width: 20, height: 20, borderRadius: 10,
            justifyContent: 'center', alignItems: 'center',
            backgroundColor: 'red'}}>
          <Text style={{color: 'white'}}>
            {"P"}
          </Text>
        </View>
      </View>
    );
  }
}
*/

class MyCalloutView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{backgroundColor: 'white'}}>
        <Text>{this.props.title}</Text>
      </View>
    );
  }
}

MyCalloutView.propTypes = {
  title: React.PropTypes.string.isRequired
}

Screenshot

Thanks,