Как исправить ошибку типа при рисовании линии с помощью Mapbox

Я работаю над проектом, в котором я использую API Mapbox для отображения велосипедных маршрутов.

Я следовал собственному примеру Mapbox с API, который можно найти здесь:

https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/

Почему-то у меня возникает ошибка, которая, кажется, вызвана неправильным типом, но я действительно этого не понимаю, не говоря уже о том, чтобы решить ее.

Этот код работает, как в примере.

this.map.addLayer({
      id: 'geojson',
      type: 'line',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: [
              [-122.48369693756104, 37.83381888486939],
              [-122.48348236083984, 37.83317489144141],
              [-122.48339653015138, 37.83270036637107],
              [-122.48356819152832, 37.832056363179625],
              [-122.48404026031496, 37.83114119107971],
              [-122.48404026031496, 37.83049717427869],
            ]
          }
        }
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#888',
        'line-width': 8
      }

Но когда я удаляю жестко заданные геоточки и заменяю их массивом значений LatLong, основываясь на более раннем вызове API, который я сделал для Mapbox, чтобы получить велосипедный маршрут, я получаю сообщение об ошибке:

this.map.addLayer({
      id: 'geojson',
      type: 'line',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'LineString',
            coordinates: this.directionsResult.routes[0].geometry.coordinates
          }
        }
      },
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#888',
        'line-width': 8
      }
    });

Сообщение об ошибке:

(property) mapboxgl.Layer.source?: string | mapboxgl.GeoJSONSourceRaw | mapboxgl.VideoSourceRaw | mapboxgl.ImageSourceRaw | mapboxgl.CanvasSourceRaw | mapboxgl.VectorSource | mapboxgl.RasterSource | mapboxgl.RasterDemSource
Type '{ type: string; data: { type: string; properties: {}; geometry: { type: string; coordinates: LatLong[]; }; }; }' is not assignable to type 'string | GeoJSONSourceRaw | VideoSourceRaw | ImageSourceRaw | CanvasSourceRaw | VectorSource | RasterSource | RasterDemSource'.
  Type '{ type: string; data: { type: string; properties: {}; geometry: { type: string; coordinates: LatLong[]; }; }; }' is not assignable to type 'GeoJSONSourceRaw'.
    Types of property 'type' are incompatible.
      Type 'string' is not assignable to type '"geojson"'.ts(2322)
index.d.ts(1298, 9): The expected type comes from property 'source' which is declared here on type 'Layer'.

Когда я сравниваю обозначение жестко запрограммированных геоточек с моим результатом, который я получаю от API направлений, они, кажется, имеют точно такой же тип и обозначение:

let coords = this.directionsResult.routes[0].geometry.coordinates;
let geometry = [
      [-122.48369693756104, 37.83381888486939],
      [-122.48348236083984, 37.83317489144141],
      [-122.48339653015138, 37.83270036637107],
      [-122.48356819152832, 37.832056363179625],
      [-122.48404026031496, 37.83114119107971],
      [-122.48404026031496, 37.83049717427869]
    ];

console.log(coords);
console.log(geometry);

Что дает мне следующий вывод консоли:

(17) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
map-box.component.ts:94 

(6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]

Кто-нибудь с некоторыми предложениями помощи о том, что я делаю неправильно здесь? Спасибо!