onPress not working while MapView is rerendering

[dclipca]

In the following component, I am updating the shape for ShapeSource every second. The problem is that the whole component is rendering, making me unable to interact with the map while it is updating. How this can be solved? Is there something I can use on the side of Mapbox?

export default class App extends React.PureComponent<Props, State> {

  constructor(props: any) {
    super(props)
    this.state = {
      centerCoordinate: [0, 0],
      room: null,
      buildingsShape: {
        type: "FeatureCollection",
        features: [],
      }
    }
  }

  render() {

    return (
      <SafeAreaView style={styles.container}>

        <MapboxGL.MapView styleURL={'mapbox://styles/virtumonde/ck9c05lyq03aj1jocinq7c0jv'} style={styles.map} onPress={async (e) => this.state.room?.send('SET_DESTINATION_COORDINATE', { lng: e.geometry.coordinates[0], lat: e.geometry.coordinates[1] })}>
          <MapboxGL.Camera centerCoordinate={this.state.centerCoordinate} zoomLevel={19} />

          <MapboxGL.ShapeSource id='players' shape={this.state.playersShape}>
          <MapboxGL.CircleLayer
              id={'players-layer'}
              style={{
                circleRadius: 10,
                circleRadiusTransition: {duration: 5000},
                circleColor: '#1da1f2',
                circleStrokeColor: 'white',
                circleStrokeWidth: 2
              }}
            />
          </MapboxGL.ShapeSource>
          </MapboxGL.MapView>

      </SafeAreaView>
    );
  }
}