polyline reactjs

Witam, chciałbym stworzyć linie pomiedzy punktami na mapie. Jedyny efekt jaki uzyskalem to wpisujac w formularzu wspolrzedne punktu wyswietla mi na mapie marker a chciałbym, zeby np po dodaniu 3 punktow stworzyła sie jakby trasa.. Czy ktoś może pomoc?
w stanie przechowuje tablice:

state = { 
         items: [],
         selectedPark: null
}

w metodzie render trzymam mapke:

 <ReactMapGL {...this.state.viewport} mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
          mapStyle="mapbox://styles/toemk/ck8jf1dl90awl2smhfexrgpe8"
          onViewportChange={(viewport) => this.setState({ viewport: viewport })}
        >
          {this.state.items.map((park) => (
            <Marker
              key={park.Id}
              latitude={park.latitude}
              longitude={park.longitude}

            >
              <button className="marker-btn" onClick={(e) => {
                e.preventDefault();
                this.setState({ selectedPark: park })

              }}>
                <img src="mark.svg" alt="Icon" />
              </button>
            </Marker>
          ))}
</ReactMapGL>

no i mam formularz ktory oczekuje wspolrzednych x i y i po wcisnieciu w button wyswietla mi marker o tych wspolrzednych

addItem = (e) => {
    e.preventDefault();
    const newItem = { 
      latitude: parseFloat(this.state.Latitude),
      longitude: parseFloat(this.state.Longitude),
    };
    this.setState(prevState => ({
      items: [...prevState.items, newItem]
    }));
  }