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

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.