Drawcontrol doesn't work on pre-existing layers

If a map is initialized with some feature, the drawcontrol doesn't handle them.

To replicate the problem:

1) open the code sandbox at https://codesandbox.io/s/xenodochial-tu-pwly8. 2) add a new layer (you can replace the code in index.js in the sandbox with the following, that just adds a GeoJSONLayer, displaying a magenta line from around London to somewhere in the Indian Ocean ):

import React from "react";
import ReactDOM from "react-dom";
import ReactMapboxGl, {GeoJSONLayer} from "react-mapbox-gl";
import DrawControl from "react-mapbox-gl-draw";
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";

import "./styles.css";
const geojsonStyles = {  
  linePaint: {
    "line-color": "#ff11ff",
    "line-width": 4,
    "line-opacity": 1
  }  
}

const data = {
  'type': 'Feature',
  'properties': {},
  'geometry': {
    'type': 'LineString',
    'coordinates': [[-0.23,51.54], [90,0]]
  }
}

const Map = ReactMapboxGl({
  accessToken:
    "pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g"
});

function App() {
  const onDrawCreate = ({ features }) => {
    console.log(features);
  };

  const onDrawUpdate = ({ features }) => {
    console.log(features);
  };

  return (
    <div>
      <h2>Welcome to react-mapbox-gl-draw</h2>
      <Map
        style="mapbox://styles/mapbox/streets-v9" // eslint-disable-line
        containerStyle={{
          height: "600px",
          width: "100vw"
        }}
      >
        <DrawControl onDrawCreate={onDrawCreate} onDrawUpdate={onDrawUpdate} />
        <GeoJSONLayer {...geojsonStyles} data={data} />
      </Map>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

3) run the code.

-> the drawcontrol doesn't act on the pre-existing line.

A code sandbox for this behaviour is available at: https://codesandbox.io/s/infallible-poitras-lpwr41

amaury1093 / react-mapbox-gl-draw

Drawcontrol doesn't work on pre-existing layers #566