Why do my Mapbox Symbol Layer icons go transparent with MapboxGL React Native?

I'm using MapboxGL React Native library on my Android emulator.

I am successfully showing icons for my features using Symbol Layers. I would like to show an alternative icon image when a pin is selected. However, at the moment when a pin is selected they are changing to be slightly transparent which is not what I intend.

Additionally, when I zoom in on the map it starts to show the correct images.

What am I doing wrong?

Please see the code below.

import MapboxGL from "@react-native-mapbox-gl/maps"
import pinImage from '../../Assets/Images/pin.png'
import pinSelectedImage from '../../Assets/Images/pinSelected.png'


const layerStyles = {
  pin: {
    iconImage: pinImage,
    iconSize: 0.3,
    iconOpacity: 1,
    iconAllowOverlap: true,
    iconIgnorePlacement: true
  },
  pinSelected: {
    iconImage: pinSelectedImage,
    iconSize: 0.3,
    iconOpacity: 1,
    iconAllowOverlap: true,
    iconIgnorePlacement: true
  }
}

class ExampleScreen extends React.Component {
  constructor() {
    super()

    this.state = {
      selectedPinID: null
    }
  }

  buildFeatureCollection() {
    return {
      "type": "FeatureCollection",
      "features": this.props.m.map( m => {
        return {
          type: "Feature",
          id: m.id,
          properties: {
            id: m.id,
            m: m.fields,
            isSelected: this.state.selectedPinID === m.id
          },
          geometry: {
            type: "Point",
            coordinates: [ x, y ],
          }
        }
      })
    }
  }

  onPress( e ) {
    const feature = e.nativeEvent.payload;
    this.setState({ selectedPinID: feature.properties.id })
  }

  render() {
    const featureCollection = this.buildFeatureCollection();

    console.log("FC", featureCollection)

    return (
               <MapboxGL.MapView 
                  style={styles.map}
                  >
                  <MapboxGL.UserLocation />   
                  <MapboxGL.Camera 
                    zoomLevel={12} 
                    followUserLocation={false} 
                    followUserMode='normal' 
                    centerCoordinate={[0.1275000, 51.5074000]} />

                  <MapboxGL.ShapeSource
                    id="symbolLocationSource"
                    hitbox={{ width: 30, height: 30 }}
                    shape={featureCollection}
                    onPress={this.onPress}
                  >
                    <MapboxGL.SymbolLayer
                      id="pin"
                      filter={['==', 'isSelected', false]}
                      style={layerStyles.pin}
                    />
                    <MapboxGL.SymbolLayer
                      id="pinSelected"
                      filter={['==', 'isSelected', true]}
                      style={layerStyles.pinSelected}
                    />

                  </MapboxGL.ShapeSource>
                </MapboxGL.MapView>
     )
  }
}