I’m looking for a way to implement the following use case:

• I have a react-map-gl map loaded with several layers:
  • Layer 0: A fill-extrusion layer which I’m getting from a Mapbox Studio data source
  • Layer 1: A GeoJSON layer containing a FeatureCollection of LineStrings
  • Layer 2: A GeoJSON layer containing a FeatureCollection of Points
• On this map, I want to allow the user to interact with the already present GeoJSON data in order to:
  • Drag existing points from Layer 2
  • Delete existing points from Layer 2
  • Select a point by clicking on it (to highlight it)
• I also want to allow the user to add new data to the map by drawing new LineStrings on Layer 2

So far, I was disappointed with what I found:

1. mapbox-gl-draw seems to be limited to the addition of new data by drawing, with no practical use case or documentation to edit/interact with existing data
2. react-map-gl-draw seemed promising but unfortunately, it is not compatible with React 17 and not maintained anymore. It also does not seem to work with the newer react-map-gl versions anyway.
3. nebula.gl‘s latest stable version is also not compatible with React 17 but I managed to install it by picking an alpha version. The problem is this library alone is quite low-level and I have no clue about how to integrate it with react-map-gl to use EditableGeoJsonLayer, for instance. Their GeoJSON editor does exactly what I would like to do and much more, but I could not find the code in their repo.

If someone knows how to do this with react-map-gl + nebula.gl or another library I’m not aware of, I would appreciate any snippet or working example. Thank you!