How to prevent the style of the annotation point from appearing to be lost, it turns completely black?

Question

I am using the react-native-mapbox-gl library and I am showing some points on a map. Each has its own callout to display additional information when the respective point is pressed.

I have found the docs/Callout.md and Callout.js source and and example using it in example/src/examples/ShowPointAnnotation.js. This was a great help, thank you so much for the example... I might though doing something really wrong and I have spent days already on this...

My issue is that when I press one annotation, the styling of the annotations appears to be lost (they go all black). Similarity, the styling for the callouts don't seem to be applied. They all black, too. I have shared code and screenshots bellow.

<MapboxGL.PointAnnotation
    key={id}
    id={id}
    coordinate={coordinate}
    title={title}
    onSelected={feature => {
        debugger
        this.onAnnotationSelected(i, feature)
    }}
    onDeselected={this.onAnnotationDeselected}
>
    <View
        style={[
            styles.annotationContainer,
            {
                backgroundColor: bgColour,
                borderRadius: ANNOTATION_SIZE / 2,
                borderWidth: StyleSheet.hairlineWidth,
                borderColor: borderColor
            }
        ]}
    >
        <Text style={[styles.annotationFill, { color: borderColor }]}>
            {studio.id}
        </Text>
    </View>             
    <MapboxGL.Callout
        style={[
            styles.calloutContainer,
            { backgroundColor: bgColour, borderColor: borderColor }
        ]}
        title={title}
    >
        <View
            style={[
                styles.calloutContent,
                {
                    backgroundColor: bgColour,
                    borderColor: borderColor
                }
            ]}
        >
            <Text style={[styles.annotationFill, { color: borderColor }]}>
                {title}
            </Text>
        </View>
        <View
            style={[
                styles.tip,
                styles.calloutContent,
                {
                    backgroundColor: bgColour,
                    borderColor: borderColor
                }
            ]}
        />
    </MapboxGL.Callout>     
</MapboxGL.PointAnnotation>

And stylings

const ANNOTATION_SIZE = 32

const styles = StyleSheet.create({
    annotationContainer: {
        width: ANNOTATION_SIZE,
        height: ANNOTATION_SIZE,
        alignItems: 'center',
        justifyContent: 'center'
    },
    annotationFill: {
        color: 'black'
    },
    container: {
        flex: 1
    },
    calloutContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        width: 180,
        zIndex: 9999999
    },
    calloutContent: {
        flex: 1,
        position: 'relative',
        padding: 8,
        borderRadius: 3,
        borderWidth: 1
    },
    calloutTitle: {
        width: ANNOTATION_SIZE,
        height: ANNOTATION_SIZE,
        color: 'black',
        textAlign: 'center'
    },
    calloutTip: {
        zIndex: 1000,
        marginTop: -2,
        elevation: 0,
        backgroundColor: 'transparent',
        borderTopWidth: 16,
        borderRightWidth: 8,
        borderBottomWidth: 0,
        borderLeftWidth: 8,
        borderTopColor: 'white',
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent'
    }
})

I am concerned though as well that I should not be using PointAnnotation, as it is marked to be deprecated. Is there an alternative way to achieve the same? Could someone point me into right direction? I am happy to contribute too if needed.