Google Maps waypoints для travelMode: TRANSIT

Добрый день, написал компонент который составляет маршрут по точкам travelMode: DRIVING, хочу сделать тоже самое но для travelMode: TRANSIT. В wayPointsData приходят данные о маркере а именно (координаты lan & lon). Помогите проложить маршрут для общественного транспорта. Читал в документации про объект transitOptions но не совсем понял как через него прокладывать маршрут. Возможно можно сделать через Polyline. wayPointsData:

/*global google*/
import React, {Component} from "react";
import locations from '../../data/locations.json';
import './Map.css';
const { compose, withProps, lifecycle } = require("recompose");
const {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    DirectionsRenderer,
} = require("react-google-maps");
const styles = {
    containerElement: {
        position: 'fixed',
        height: '100%',
        top: '0',
        left: '0',
        width: '100%',
    }
};
class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shouldRenderMap: true
        };
    }
    render() {
        let MapWithADirectionsRenderer;
        this.props.route.map((val) => {
            let origin = locations.find((e) => {
                return e.code === val.origin;
            });
            let destination = locations.find((e) => {
                return e.code === val.destination;
            });
            let wayPointsData = [];
            val.legs.map((leg) => {
                leg.callingPoints ? leg.callingPoints.map((point) => {
                    let pointOrigin = locations.find((e) => {
                        return e.code === point.station;
                    });
                    if(origin.name !== pointOrigin.name && wayPointsData.length < 23) {
                        wayPointsData.push({
                            lat: pointOrigin.lat,
                            lon: pointOrigin.lon
                        });
                    }
                }) : []
            });
            MapWithADirectionsRenderer = compose(
                withProps({
                    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyCwD7tScQzIMMwTaC5DLZjaKgPpzvEToGA",
                    loadingElement: <div style={{ height: `100%` }} />,
                    containerElement: <div style={styles.containerElement} />,
                    mapElement: <div style={{ height: `100%` }} />,
                }),
                withScriptjs,
                withGoogleMap,
                lifecycle({
                    componentDidMount() {
                        const DirectionsService = new google.maps.DirectionsService();
                        DirectionsService.route({
                            origin: new google.maps.LatLng(origin.lat, origin.lon),
                            destination: new google.maps.LatLng(destination.lat, destination.lon),
                            travelMode: google.maps.TravelMode.DRIVING, /*DRIVING, BICYCLING, TRANSIT and WALKING*/
                            waypoints: wayPointsData.map((key) => {
                                return {
                                    location: new google.maps.LatLng(key.lat, key.lon),
                                    stopover: false,
                                }
                            }),
                            optimizeWaypoints: true,
                        }, (result, status) => {
                            if (status === google.maps.DirectionsStatus.OK) {
                                this.setState({
                                    directions: result,
                                });
                            } else {
                                console.error(`error fetching directions ${result}`);
                            }
                        });
                    }
                })
            )(props =>
                <GoogleMap
                    defaultZoom={8}
                    defaultCenter={new google.maps.LatLng(origin.lat, origin.lon)}
                >
                    {props.directions && <DirectionsRenderer directions={props.directions} />}
                </GoogleMap>
            );
        });
        return (
            <div className="map">
                <MapWithADirectionsRenderer />
            </div>
        );
    }
}
export default Map;

Может кто объяснит как это сделать.