title: How to cerate hover effect in geojson mapbox
body: <p>I am using <em><strong>MAP-BOX</strong></em> to draw map on the screen. I want to create some effect on mouse-hover.
  I created line using <code>geojson</code> source and <code>react-map-gl</code> as a wrapper.
  I want to set some opacity to the line on mouse hover.</p>
  <pre class="lang-js prettyprint-override"><code>export const layer = {
    'id': 'route',
    'type': 'line',
    'source': 'route',
    'layout': {
        'line-join': 'round',
        'line-cap': 'round'
    },
    'paint': {
        'line-color': '#E95617',
        'line-width': 2,
        'line-dasharray':[1,2,3]
    }
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>export const route1={
      
    type: &quot;Feature&quot;,
    properties: {
        id=&quot;route1&quot;
    },
    geometry: {
      type: &quot;LineString&quot;,
      coordinates: [
          [76.994168,31.780632],
          [76.993894,31.781929],
          [76.997771,31.783204 ],
          //------ more data
      ]
    }
  } 
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import ReactMapGL,{Source, Layer} from &quot;react-map-gl&quot;;
  const Routes=()=&gt;{
      return &lt;ReactMapGL {...props}&gt;
          &lt;Source type=&quot;geojson&quot; data={tempdata.route1}&gt;
              &lt;Layer {...tempdata.layer}/&gt;
          &lt;/Source&gt;
  
          &lt;Source type=&quot;geojson&quot; data={tempdata.route2}&gt;
              &lt;Layer {...tempdata.layer1}/&gt;
          &lt;/Source&gt;
      &lt;/ReactMapGL&gt;
  }
  </code></pre>
  <p>When i opened browser console and looked for id <code>route and route</code> then it reports me null. I did not saw any example or documentation to add class-name into <em><strong>geojson</strong></em> source.
  How can i create hover effect?</p>