react-native-maps MapView rotation - react-native

Question

I want to rotate the MapView as per the phone rotation. I am not getting a solution in official documentation, so I did a trick to do it by rotating the layout by setting the transform style but I can understand it is not the perfect solution because the labels over the screen also rotating with the layout.
If it is possible by animateCamera, Please suggest me how can I update the code.
I have attached a screenshot of the issue and relevant code block.
import MapView from 'react-native-maps';
import { Bubbles, DoubleBounce } from 'react-native-loader';
class TestPropUpdate extends Component {
constructor(props) {
super(props);
this.state = {
origin: null,
latlong: null,
initialRegion: null,
compasAngle: 0
};
}
componentDidUpdate() {
CompassHeading.start(3, ({ heading, accuracy }) => {
if (this.state.compasAngle !== heading) {
this.setState({ compasAngle: heading })
console.log(heading)
}
CompassHeading.stop();
})
}
getCurrentLocation = () => ({
latitude: this.state.latlong.currentLatitude,
longitude: this.state.latlong.currentLongitude,
latitudeDelta: 0.01,//0.01155,
longitudeDelta: 0.01//0.01155
});
setCurrentLocation = (locationChangedResult) => {
this.setState({
latlong: {
"currentLatitude": locationChangedResult.nativeEvent.coordinate.latitude,
"currentLongitude": locationChangedResult.nativeEvent.coordinate.longitude
}
})
}
render() {
return (
<SafeAreaView style={{ flex: 1, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' }}>
{this.state.latlong ?
<MapView
onUserLocationChange={locationChangedResult => this.setCurrentLocation(locationChangedResult)}
region={this.getCurrentLocation()}
style={[
styles.mapStyle,
{
transform: [{ rotate: `${360 - this.state.compasAngle}deg` }],
}
]}
>
</MapView>
: <DoubleBounce />}
</SafeAreaView>
);
}
}
export default TestPropUpdate;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
padding: 10,
alignItems: 'center',
justifyContent: 'center',
},
boldText: {
fontSize: 25,
color: 'red',
marginVertical: 16,
textAlign: 'center'
},
mapStyle: {
position: 'absolute',
width: "200%",
height: "100%",
}
});