google-map-reactとDirectionsAPIを利用して、経路表示をさせたいが、DirectionsRendererやDirectionsServiceのメソッドが呼び出せない

Question

こんにちは
ReactおよびTypeScriptで、google-map-reactとDirectionsAPIを利用して、経路表示をさせようと試みています。
いろいろな情報を参考にして、DirectionsServiceとDirectionsRendererを利用することで、経路表示が可能になることは理解できたのですが、
RendererやServiceの利用箇所で

TypeError: renderer.setMap is not a function

というエラーが発生して関数を呼び出せずにいて困っています。

仮にこの部分をコメントアウトしたとしても、他の関数利用箇所で同様に
××× is not a function
というエラーが発生します。

console.logでmapやmapsの値を出力するとundefinedではなくて中身がいろいろ出力されているので値がわたってきていないというわけではないようです。

何か解決策はありそうでしょうか？
仮説でも大変ありがたいので回答よろしくお願いします。

import React, {Component} from 'react';
import GoogleMapReact, {Coords} from "google-map-react";

const directoins = (args: any, places: Coords) => {
    const map = args.map;
    const maps = args.maps;

// この場所において出力はされる
    console.log(map)
    console.log(maps)
    let request = {
        origin: maps.LatLng(35.681382, 139.766084),
        destination: maps.LatLng(35.681382, 139.766085),
        travelMode: maps.DirectionsTravelMode.WALKING,
    };

    let directionsService = maps.DirectionsService;
    let renderer = maps.DirectionsRenderer;

// 以下の箇所に置いて該当エラーメッセージが発生している
    renderer.setMap(map)

    directionsService.route(request, function (result: any, status: any) {
        if (status == maps.DirectionsStatus.OK) {
            renderer.setDirections(result);
        }
    });
};

class SimpleMap extends Component {
    state = {
        lat: null,
        lng: null,
        zoom: 14
    };

    componentDidMount() {
        navigator.geolocation.getCurrentPosition((position) => {
                this.setState({
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                });
            },
            (err) => {
                console.log(err);
            })
    }

    buildCords(lat: number, lng: number): any {
        return {
            lat,
            lng
        }
    }

    render() {
        if (this.state.lat == null || this.state.lng == null) {
            return null
        }

        const center = this.buildCords(convertNullToInt(this.state.lat), convertNullToInt(this.state.lng))
        return (
            <div style={{height: '100vh', width: '100%'}}>
                <GoogleMapReact
                    bootstrapURLKeys={{key: "hogehoge"}}
                    defaultCenter={center}
                    defaultZoom={this.state.zoom}
                    yesIWantToUseGoogleMapApiInternals={true}
                    onGoogleApiLoaded={(args: { map: any, maps: any }) => directoins(args, center)}>
                </GoogleMapReact>
            </div>
        );
    }
}

export default SimpleMap;

function convertNullToInt(n: number | null) {
    if (n == null) {
        return 0
    }

    return n
}