smooth user navigation react native maps

    const AnimatedImage = Animated.createAnimatedComponent(Image)

export default (props) =>  {
    const rotation = useRef(new Animated.Value(0)).current
    const bearingDegree = rotation.interpolate({
        inputRange: [0, 360],
        outputRange: ['0deg', '360deg'],
    });
   useEffect(() => {
        if(props.bearing !== null || props.bearing !== undefined) {
            Animated.timing(rotation, {
                toValue: props.bearing,
                useNativeDriver: true,
                duration: 10000,
            }).start()
        }
    }, [props.bearing])

  return (
        <Marker.Animated
            coordinate={markerOrigin.current.region}
            ref={marker}
            flat
            anchor={{ x: 0.5, y: 0.5 }}
        >
            <AnimatedImage
                source={require('../../assets/images/motor-map.png')}
                style={[styles.bike, {transform: [{rotate: bearingDegree}]}]}
                resizeMode="contain"
            />
        </Marker.Animated>
    )
}