React Native mapbox gl zIndex not displaying as expected

Question

I'm trying to build a LIVE map and I noticed that the zIndex of the react-native mapbox gl doesn't work when the render is in a different state. When you render something after, it stays underneath. Is there anyway for certain things to always be on top? For example, callback should always be on top no matter what.

<MapboxGL.MapView
        style={{flex: 1}}
        styleURL={'mapbox://styles/gigajungkyu/ckt962t3a19zh17pfq1sr7z3f'}
        pitchEnabled={false}
        rotateEnabled={false}>
        <MapboxGL.PointAnnotation
          id={'1'}
          key={'1'}
          style={{zIndex: 1}}
          coordinate={[-122.849, 49.1]}>
          <TouchableOpacity
            style={{zIndex: 1}}
            onPress={() => setDisplay((prevState) => !prevState)}>
            <View
              style={{width: 100, height: 100, backgroundColor: 'red'}}></View>
          </TouchableOpacity>
          <MapboxGL.Callout title={'You'} />
        </MapboxGL.PointAnnotation>
        {display && (
          <MapboxGL.PointAnnotation
            id={'2'}
            key={'2'}
            style={{zIndex: 99999999}}
            coordinate={[-103.349, 49.1]}>
            <TouchableOpacity style={{zIndex: 5}}>
              <View
                style={{
                  width: 100,
                  height: 100,
                  backgroundColor: 'blue',
                }}></View>
            </TouchableOpacity>
            <MapboxGL.Callout title={'You'} />
          </MapboxGL.PointAnnotation>
        )}
      </MapboxGL.MapView>