title: React Native MapBoxGL SimbolLayer shows on random position when zooming
body: <p>I have a KML file from Google Earth that its gonna be converted to geojson. It contains 1 polygon and 2 point (marker).
  However, when I load that geojson to ShapeSource like this code below</p>
  <pre><code>    &lt;SafeAreaView style={styles.container}&gt;
        &lt;MapboxGL.MapView style={styles.map}&gt;
          &lt;MapboxGL.Camera
            zoomLevel={14}
            animationMode={'flyTo'}
            animationDuration={1100}
            centerCoordinate={[defaultMidPoint.longitude, defaultMidPoint.latitude]}
          /&gt;
          {mapsGeoJSON &amp;&amp; (
            &lt;MapboxGL.ShapeSource id={'shao'} shape={mapsGeoJSON}&gt;
              &lt;MapboxGL.FillLayer
                id={'previewArea'}
                style={{
                  fillAntialias: true,
                  fillColor: 'rgba(255, 255, 0, 0.4)',
                  fillOutlineColor: 'rgba(255, 0, 0, 1)',
                }}
              /&gt;
  
              &lt;MapboxGL.SymbolLayer
                id=&quot;marker&quot;
                aboveLayerID=&quot;previewArea&quot;
                style={{
                  iconImage: division,
                  iconSize: 1,
                }}
              /&gt;
            &lt;/MapboxGL.ShapeSource&gt;
          )}
        &lt;/MapboxGL.MapView&gt;
      &lt;/SafeAreaView&gt;
  </code></pre>
  <p>The props inside the geojson is loaded including the polygin and the marker. But the marker showing randomly on everywhere like this video. (please click on that giphy link)</p>
  <p><a href="https://giphy.com/gifs/8rcxy3ymU6y4wEbuly" rel="nofollow noreferrer">via GIPHY</a></p>
  <p>It should show 2 marker. How to achieve that?</p>
  <p>My geojson:</p>
  <pre><code>{
    &quot;type&quot;: &quot;FeatureCollection&quot;,
    &quot;features&quot;: [
      {
        &quot;type&quot;: &quot;Feature&quot;,
        &quot;geometry&quot;: {
          &quot;type&quot;: &quot;Polygon&quot;,
          &quot;coordinates&quot;: [
            [
              [
                106.8338112502602,
                -6.201688127051138,
                16.87390009657168
              ],
              [
                106.8345784252153,
                -6.223435658941442,
                15.96151752351821
              ],
              [
                106.8499317207287,
                -6.223054276742122,
                14.95412051800844
              ],
              [
                106.8499303073782,
                -6.226010669074273,
                16.871529036928
              ],
              [
                106.8528087470502,
                -6.225819843794638,
                16.9254682421025
              ],
              [
                106.8526251591457,
                -6.203394339882926,
                8.018892591261013
              ],
              [
                106.8338112502602,
                -6.201688127051138,
                16.87390009657168
              ]
            ]
          ]
        },
        &quot;properties&quot;: {
          &quot;name&quot;: &quot;Shape&quot;,
          &quot;styleUrl&quot;: &quot;#__managed_style_0ED941ED9221511A3486&quot;,
          &quot;styleMapHash&quot;: {
            &quot;normal&quot;: &quot;#__managed_style_11DB66B07521511A3486&quot;,
            &quot;highlight&quot;: &quot;#__managed_style_2B474C71F521511A3486&quot;
          }
        },
        &quot;id&quot;: &quot;067F9E7AC821511A3484&quot;
      },
      {
        &quot;type&quot;: &quot;Feature&quot;,
        &quot;geometry&quot;: {
          &quot;type&quot;: &quot;Point&quot;,
          &quot;coordinates&quot;: [
            106.8375528929654,
            -6.219429389551594,
            0
          ]
        },
        &quot;properties&quot;: {
          &quot;name&quot;: &quot;Placemark 1&quot;,
          &quot;styleUrl&quot;: &quot;#__managed_style_0ED941ED9221511A3486&quot;,
          &quot;styleMapHash&quot;: {
            &quot;normal&quot;: &quot;#__managed_style_11DB66B07521511A3486&quot;,
            &quot;highlight&quot;: &quot;#__managed_style_2B474C71F521511A3486&quot;
          }
        },
        &quot;id&quot;: &quot;06E2AC308B21511A76D1&quot;
      },
      {
        &quot;type&quot;: &quot;Feature&quot;,
        &quot;geometry&quot;: {
          &quot;type&quot;: &quot;Point&quot;,
          &quot;coordinates&quot;: [
            106.8257462576387,
            -6.205879085150997,
            11.12209204998996
          ]
        },
        &quot;properties&quot;: {
          &quot;name&quot;: &quot;Placemark 2&quot;,
          &quot;styleUrl&quot;: &quot;#__managed_style_0ED941ED9221511A3486&quot;,
          &quot;styleMapHash&quot;: {
            &quot;normal&quot;: &quot;#__managed_style_11DB66B07521511A3486&quot;,
            &quot;highlight&quot;: &quot;#__managed_style_2B474C71F521511A3486&quot;
          }
        },
        &quot;id&quot;: &quot;074354693A21511ACA82&quot;
      }
    ]
  }
  </code></pre>