title: React-native-map marker color is not changing
body: <p>I want to change the color of the marker sequentially. when the App is firstly rendered all of the colors of the marker should be red. after one second later first marker(no-1) color want to be blue. then after the one-second first marker color goes to previous state color. but the second marker (no-2) marker goes to blue. </p>
  
  <p>for example - we have six marker</p>
  
  <p><code>In one-second - blue -red -red -red -red- red
  In two-second - red -blue - red -red -red -red
  In three-second - red -red -blue -red -red -red
  In four-second - red -red- red -blue -red -red
  In five-second - red -red- red -red -blue -red
  In six-second - red -red- red -red -red -blue</code></p>
  
  <p>here is my code - the active state is changing but not the color of the marker.</p>
  
  <pre><code>import React from 'react';
  import { View, Text, StyleSheet,Animated, Platform } from 'react- 
  native';
  import MapView, {AnimatedRegion,Polyline} from 'react-native-maps';
  
  export default class App extends React.Component {
   state = {
  currentLongitude: 'unknown', 
  currentLatitude: 'unknown',
  startTransition: 0,
  endTransition: 5,
    markers: [{
      title: 'lat: 28.6095206, log: 77.1011353',
      index: 0,
      active: false,
      coordinates: {
        latitude: 28.6095206,
        longitude: 77.1011353,
  
      },
    },
    {
      title: 'lat: 28.6151759, log: 77.0842171',
      index: 1,
      active: false,
      coordinates: {
        latitude: 28.6151759,
         longitude: 77.0842171,
  
      }, 
  
    },
    {
      title: 'lat: 28.6242541, log: 77.0652866',
      index: 2,
      active: false,
      coordinates: {
        latitude: 28.6242541,
         longitude: 77.0652866,
  
      }, 
  
    },
    {
      title: 'lat: 28.6328224, log: 77.0863152',
      index: 3,
      active: false,
      coordinates: {
        latitude: 28.6328224,
         longitude: 77.0863152,
  
      }, 
  
    },
    {
      title: 'lat: 28.6364551, log: 77.0968294',
      index: 4,
      active: false,
      coordinates: {
        latitude: 28.6364551,
         longitude: 77.0968294,
  
      }, 
  
    },
    {
      title: 'lat: 28.6364551, log: 77.0968294',
      index: 5,
      active: false,
      coordinates: {
        latitude: 28.6109522, 
        longitude: 77.1131802,
  
      },   
    }, 
   ]
  };
  
  componentDidMount = () =&gt; { 
  this.animate()
  };
  // shouldComponentUpdate(){
  //   return false
  // }
  
  async animate() {
   const {markers} = this.state;
   for(var i in markers){
    if(markers[i]['active'] == true){  
      const newItems = [...this.state.markers];
      newItems[i].active = !newItems[i].active;
      this.setState({marker: newItems})   
    }
  
  }
  
  if(markers[this.state.startTransition].index==
  this.state.startTransition){
    if(markers[this.state.startTransition].active==false){
      const newItems = [...this.state.markers];
        let index = this.state.startTransition
  
        newItems[index].active = !newItems[index].active;
  
        this.setState({ markers:JSON.parse(JSON.stringify(newItems)) 
     });    
    }
  
   }
  
  if(this.state.startTransition &lt; this.state.endTransition){
  
    let currentTransition = this.state.startTransition + 1;
    this.setState({startTransition: currentTransition});
  
  } else {
    this.setState({startTransition: 0});
  }
  let x = setTimeout(()=&gt;{
  
    this.animate()
   }, 1000);
  }
  
  
  render() {
  const {currentLatitude} =  this.state;
  const {currentLongitude} = this.state;
  const Latitude = parseFloat(currentLatitude)
  const Longitude = parseFloat(currentLongitude)
  
  return (
    &lt;View style={styles.container}&gt;
    &lt;MapView
      style={styles.map}
       region={{
        latitude: 28.6095206,
        longitude: 77.1011353,
        latitudeDelta: 0.155,
        longitudeDelta: 0.151,
      }}
    &gt;
  
      {this.state.markers.map(marker =&gt; (
  
   &lt;MapView.Marker.Animated 
    coordinate={marker.coordinates}
    title={marker.title}
    key = {marker.index}
    pinColor={marker.active==true?'blue':'red'}
  /&gt;
  ))
  }
  
  
       &lt;Polyline
  coordinates={[
  { latitude: 28.6095206, longitude: 77.1011353 },
  { latitude: 28.6151759, longitude: 77.0842171},
  { latitude: 28.6242541, longitude: 77.0652866},
  { latitude: 28.6328224, longitude: 77.0863152},
  { latitude: 28.6364551, longitude: 77.0968294},
  { latitude: 28.6109522, longitude: 77.1131802 } ]}
      strokeColor="#000" 
      strokeColors={[
          '#7F0000',
          '#00000000', 
          '#B24112',
          '#E5845C',
          '#238C23',
          '#7F0000'
      ]}
      strokeWidth={6}
    /&gt; 
        &lt;/MapView&gt;
       &lt;/View&gt;
      );
     }
    }
  
    const styles = StyleSheet.create({
     container: {
      ...StyleSheet.absoluteFillObject,
       justifyContent: 'flex-end',
        alignItems: 'center',
      },
     map: {
      flex: 1,
       ...StyleSheet.absoluteFillObject,
     },
   });
  </code></pre>