Mapbox React Native can't access the map's methods - react-native

Question

This is probably basic, but I'm getting tripped up with the documentation between the JS Mapbox and the React Native Mapbox. I'm creating a new map instance by importing mapbox into my project via import Mapbox from '#mapbox/react-native-mapbox-gl';
and then in the render() function I'm loading the map via:
<View style={container}>
<Mapbox.MapView
styleURL={Mapbox.StyleURL.Light}
zoomLevel={12}
centerCoordinate={[lat, lng]}
style={styles.container}
showUserLocation
>
{this.renderAnnotations()}
</Mapbox.MapView>
</View>
The renderAnnotations() function I've defined as follows:
renderAnnotations() {
return this.state.stations.map((station, index) =>
<TouchableHighlight onPress={this._map.flyTo.bind(this, station)} key={index}>
<View ref={component => this._root = component}>
<StationPoint key={station.id} station={station} />
</View>
</TouchableHighlight>
);
}
The goal is for it to render points on the map with a corresponding flyTo onPress event. The map and these points render perfectly fine, but the onpress event returns:
error "Cannot read property 'flyTo' of undefined"
On this tutorial, it suggests you can access the map using this._map. Is this correct and I'm making a different error? Or is there an alternative way for accessing the map methods? Any help is much appreciated!

Answer 1

Figured out the answer, in case it helps someone else. I wasn't defining a ref property on the MapView. It should have had a reference defined as this._map like the following:
<View style={container}>
<Mapbox.MapView
ref={(c) => this._map = c}
styleURL={Mapbox.StyleURL.Light}
zoomLevel={12}
centerCoordinate={[lat, lng]}
style={styles.container}
showUserLocation
>
{this.renderAnnotations()}
</Mapbox.MapView>
</View>