title: How to use react-map-gl to draw line between two point
body: <p>I am trying to draw a line between two points using react-map-gl library. I can not find example from the official document, So I am trying to reproduce same behavior from following code snippet which use Mapbox library</p>
  <pre class="lang-js prettyprint-override"><code>var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-122.486052, 37.830348],
      zoom: 15
  });
  
  map.on('load', function() {
      map.addSource('route', {
          'type': 'geojson',
          'data': {
              'type': 'Feature',
              'properties': {},
              'geometry': {
                  'type': 'LineString',
                  'coordinates': [
                      [-122.483696, 37.833818],
  
                      [-122.493782, 37.833683]
                  ]
              }
          }
      });
      map.addLayer({
          'id': 'route',
          'type': 'line',
          'source': 'route',
          'layout': {
              'line-join': 'round',
              'line-cap': 'round'
          },
          'paint': {
              'line-color': '#888',
              'line-width': 8
          }
      });
  });
  </code></pre>
  <p>Here is the sandbox, I do not see any errors on the console but the line is not displayed:<br />
  <a href="https://codesandbox.io/s/draw-line-between-two-point-v0mbc?file=/src/index.js:214-226" rel="nofollow noreferrer">https://codesandbox.io/s/draw-line-between-two-point-v0mbc?file=/src/index.js:214-226</a></p>