Me gustaría dibujar líneas rectas simples entre varios marcadores en Google Map. Renderizo este mapa usando google-map-react.

Componente de mapa

 import { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import GoogleMapReact from 'google-map-react'; import Marker from './marker'; export default function Map() { const dispatch = useDispatch(); const markers = useSelector(state => state.points); const [draggable, setDraggable] = useState(true); const [center, setCenter] = useState({ lat: 59.95, lng: 30.33 }); const [zoom, setZoom] = useState(14); const moveMarker = (key, childProps, mouse) => { let markersCopy = markers; markersCopy.map(e => e.currPoint === key ? e.currCenter = mouse : e); dispatch({type: 'REORDER', payload: markersCopy}); } return ( <div style={{ height: '100vh', width: '100%' }}> <GoogleMapReact bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_MAPS_API_KEY }} defaultCenter={center} defaultZoom={zoom} onChange={(e) => dispatch({type: 'CHANGE_CURR_CENTER', payload: e.center})} draggable={draggable} onChildMouseDown={() => setDraggable(false)} onChildMouseUp={() => setDraggable(true)} onChildMouseMove={(key, childProps, mouse) => moveMarker(key, childProps, mouse)} > {markers.map(e => { return ( <Marker lat={e.currCenter.lat} lng={e.currCenter.lng} text={e.currPoint} key={e.currPoint} /> ) })} </GoogleMapReact> </div> ) }

Me gustaría tenerlos conectados por líneas rectas en el orden en que están en la lista (los estoy agregando a la lista manualmente en otro componente). La línea resultante debe representar la ruta, el primer punto de la lista es el comienzo de la ruta, el último es el final de la ruta. ¿Cómo puedo conseguir esto?