title: Call MapboxDirections() multiple times inside loop
body: <p>I have been working with Mapbox Direction API and I am getting more than 100 of waypoints. As per Mapbox documentation I can't request more than 25 of WP to get a route, So I am calling it inside a loop of array with 25 WP chunk. Below is my sample code: </p>
  
  <pre><code>    componentDidMount(waypoints) {
          let wpChunks = this.chunkArray(waypoints, 25);
  
          for (let chunk of wpChunks) {
              routeArr.push(await this.callDirectionApi(chunk));
          }
          console.log('routeArr : ', routeArr);
      }
  
      callDirectionApi = (waypoints) =&gt; {
          let directions;
          directions = new MapboxDirections({
              accessToken: mapboxgl.accessToken,
              unit: 'metric',
              profile: 'mapbox/driving',
              interactive: false,
              controls: false,
              proximity: [88.30, 22.58]
          });
  
          this.map.on('load', (e) =&gt; {
              let wpIndex = 0;
              for (let ii = 0; ii &lt;= waypoints.length-2; ii++) {
                  if (ii == 0) {
                      directions.setOrigin(waypoints[ii]);
                  } else {
                      directions.addWaypoint(wpIndex, waypoints[ii]);
                      wpIndex++;
                  }
              }
              directions.setDestination(waypoints[waypoints.length-1]);
  
              directions.on('route', function(e) {
                  **console.log('Routes: ', e.route);**
                  resolve(e.route[0].geometry);
              });
  
              this.map.addControl(directions, 'top-left');
          });
      }
  </code></pre>
  
  <p>As a result, if I console.log the route output(the above bold line), I am getting same route as a response in each request inside loop. </p>
  
  <p>Can anyone suggest me please am I doing anything wrong or not? Is this the right way to do so? If no, can you suggest any sample example?</p>
  
  <p>Thanks</p>