React Native MapBoxGL SimbolLayer shows on random position when zooming

Question

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

    <SafeAreaView style={styles.container}>
      <MapboxGL.MapView style={styles.map}>
        <MapboxGL.Camera
          zoomLevel={14}
          animationMode={'flyTo'}
          animationDuration={1100}
          centerCoordinate={[defaultMidPoint.longitude, defaultMidPoint.latitude]}
        />
        {mapsGeoJSON && (
          <MapboxGL.ShapeSource id={'shao'} shape={mapsGeoJSON}>
            <MapboxGL.FillLayer
              id={'previewArea'}
              style={{
                fillAntialias: true,
                fillColor: 'rgba(255, 255, 0, 0.4)',
                fillOutlineColor: 'rgba(255, 0, 0, 1)',
              }}
            />

            <MapboxGL.SymbolLayer
              id="marker"
              aboveLayerID="previewArea"
              style={{
                iconImage: division,
                iconSize: 1,
              }}
            />
          </MapboxGL.ShapeSource>
        )}
      </MapboxGL.MapView>
    </SafeAreaView>

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)

via GIPHY

It should show 2 marker. How to achieve that?

My geojson:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              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
            ]
          ]
        ]
      },
      "properties": {
        "name": "Shape",
        "styleUrl": "#__managed_style_0ED941ED9221511A3486",
        "styleMapHash": {
          "normal": "#__managed_style_11DB66B07521511A3486",
          "highlight": "#__managed_style_2B474C71F521511A3486"
        }
      },
      "id": "067F9E7AC821511A3484"
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          106.8375528929654,
          -6.219429389551594,
          0
        ]
      },
      "properties": {
        "name": "Placemark 1",
        "styleUrl": "#__managed_style_0ED941ED9221511A3486",
        "styleMapHash": {
          "normal": "#__managed_style_11DB66B07521511A3486",
          "highlight": "#__managed_style_2B474C71F521511A3486"
        }
      },
      "id": "06E2AC308B21511A76D1"
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          106.8257462576387,
          -6.205879085150997,
          11.12209204998996
        ]
      },
      "properties": {
        "name": "Placemark 2",
        "styleUrl": "#__managed_style_0ED941ED9221511A3486",
        "styleMapHash": {
          "normal": "#__managed_style_11DB66B07521511A3486",
          "highlight": "#__managed_style_2B474C71F521511A3486"
        }
      },
      "id": "074354693A21511ACA82"
    }
  ]
}