If you possess an array consisting of coordinates and desire to showcase the directions on a map corresponding to these coordinates, you must designate the first coordinate as the start, label the last coordinate as the destination, and assign the coordinates in between as your waypoints.

Subsequently, when adding a new coordinate to the array, it is crucial to incorporate the previous last coordinate in your waypoint while designating the newly added coordinate as the destination.

Presented below is a demonstrative code where Google Place Autocomplete is utilized. You have the advantage of inputting a place, receiving suggestions, selecting a place from the suggestion list whereby its coordinates are acquired, and then pushing them into the array.

Please refer to the code snippet provided:

import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import "./style.css";
import "./config";
export class MapContainer extends Component {

  //function triggered once the map is loaded
  onMapReady = (mapProps, map) => {
    let coords = [];
    let waypoints = [];
    
    //placing data from the config file into an array
    {
      places.map((place) => coords.push({ lat: place.lat, lng: place.lng }));
    }

    //creating instances of directions service and directions renderer
    const directionsService = new google.maps.DirectionsService();
    const directionsDisplay = new google.maps.DirectionsRenderer();
    
    //assigning directions renderer to display on the map
    directionsDisplay.setMap(map);
    
    //Setting the initial coordinate in the array as the start/origin 
    let start = { lat: coords[0].lat, lng: coords[0].lng };
    
    //Designating the final coordinate in the array as the end/destination
    let end = {
      lat: coords[coords.length - 1].lat,
      lng: coords[coords.length - 1].lng,
    };
    
    //Including all coordinates between the first and last ones as waypoints
    for (let i = 1; i < coords.length - 1; i++) {
      waypoints.push({
        location: { lat: coords[i].lat, lng: coords[i].lng },
        stopover: true,
      });
    }
    
    //Creating directions requests
    let request = {
      origin: start,
      waypoints: waypoints,
      destination: end,
      travelMode: "DRIVING",
    };
    
    //displaying results on the directions renderer
    directionsService.route(request, function (result, status) {
      if (status == "OK") {
        directionsDisplay.setDirections(result);
      }
    });

    //setting up autocomplete input
    let card = document.getElementById("pac-card");
    let input = document.getElementById("pac-input");
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
    let autocomplete = new google.maps.places.Autocomplete(input);
    
    //Binding the map's bounds to the autocomplete object
    autocomplete.bindTo("bounds", map);
    
    //Specifying the fields to return upon selecting a place
    autocomplete.setFields(["address_components", "geometry", "icon", "name"]);
    
    //listener for the places input
    autocomplete.addListener("place_changed", function () {
      
      console.log(waypoints);
      let place = autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("No details available for input: '" + place.name + "'");
        return;
      }
      
      //Adding the previous last coordinate in the array as part of the waypoint
      waypoints.push({
        location: {
          lat: coords[coords.length - 1].lat,
          lng: coords[coords.length - 1].lng,
        },
        stopover: true,
      });
      
      //Inserting the Place Autocomplete coordinate in the coords array
      coords.push({
        lat: place.geometry.location.lat(),
        lng: place.geometry.location.lng(),
      });
      
      //Updating the end/destination with the Place Autocomplete result coordinate
      end = place.geometry.location;
      
      //modifying the request
      request = {
        origin: start,
        waypoints: waypoints,
        destination: end,
        travelMode: "DRIVING",
      };
      
      //issuing a new directions request
      directionsService.route(request, function (result, status) {
        if (status == "OK") {
          directionsDisplay.setDirections(result);
        }
      });
    });
  };

  render() {
    return (
      <div>
        <Map
          className="map"
          initialCenter={{ lat: 14.6091, lng: 121.0223 }}
          google={this.props.google}
          onClick={this.onMapClicked}
          onReady={this.onMapReady}
          style={{ height: "100%", position: "relative", width: "100%" }}
          zoom={8}
        ></Map>
        <div className="pac-card" id="pac-card">
          <div>
            <div id="title">Add new point</div>

            <div id="pac-container">
              <input
                id="pac-input"
                type="text"
                placeholder="Enter a location"
              />
            </div>
          </div>
        </div>
        <div style={{ width: 500, height: 500 }} id={this.props.id} />
        <div id="infowindow-content">
          <img src="" width="16" height="16" id="place-icon" />
          <span id="place-name" className="title"></span>
          <br />
          <span id="place-address"></span>
          <br />
          <span id="place-coord"></span>
        </div>
      </div>
    );
  }
}

//connecting component with Google API
export default GoogleApiWrapper({
  apiKey: "YOUR_API_KEY",
  version: "3.40",
})(MapContainer);