I need to create editable polygons using react native maps, I am able to make polygons but they are intersecting. I need to create them as shown in the link. I have tried convex hull, and graham scan to sort coordinates but nothing seems to work.

What I want to achieve

this.state = { 
coordinates: [
{latitude: 28.539259979358434, longitude: 77.35132858157158},
]
}

onMapPress1(event) {
       this.setState({
           coordinates: [...this.state.coordinates, event.nativeEvent.coordinate]
       })
   }


                          <MapView
                               ref={
                                   map => {
                                       this.mapRef = map;
                                   }}
                               style={{ flex: 1 }}
                               provider={PROVIDER_GOOGLE}

                               initialRegion={this.getInitialCenterCordinate()}
                               onPanDrag={event => this.onMapDragging(event)}
                               onRegionChangeComplete={region => this.regionChanged(region)}
                               onPress={event => this.onMapPress1(event)}
                           >
                               <Polygon coordinates={this.state.coordinates} />
                               {this.state.coordinates.map((m, i) => (
                                   <Marker
                                       key={`${m.identifier}.${i}`}
                                       coordinate={m} />
                               ))}

                    </MapView>