Как правильно создавать маршруты по нескольким точкам Yandex maps?

У меня стоит задача прокладывать автобусные маршруты на карте по нескольким точкам(остановки).

Приложение на React, использую библиотеку @pbe/react-yandex-maps для работы с апи карт.

На самой карте проложенный маршрут выглядит как ломаная линия. Т.е. точки соединяются между собой прямой линией, а не по рисунку дороги.

Собственно, вопрос - Какие механизмы/компоненты/etc надо использовать, чтобы проложенный маршрут выглядел привычным образом (повторение рисунка дороги)? Не удалось найти подходящие примеры, в том числе, в контексте react. Буду признателен любым подсказкам.

Компонент выглядит примерно так:

import {
  YMaps,
  Map,
  Placemark,
  RouteEditor,
  ZoomControl,
  RouteButton,
  Polyline,
} from "@pbe/react-yandex-maps";

function MapComponent() {
  const [coordinates, _setCoordinates] = useState<[number, number][]>([]);
  const [newCoords, setNewCoords] = useState([]);

  const map = useRef(undefined);
  const mapState = {
    center: [59.1311, 37.8822],
    zoom: 12,
  };

  const addRoute = (ymaps: any) => {
    const pointB = newCoords;
    const pointA = coordinates[length - 1];

    const multiRoute = new ymaps.multiRouter.MultiRoute(
      {
        referencePoints: [pointA, pointB],
        params: {
          routingMode: "masstransit",
        },
      },
      {
        boundsAutoApply: true,
      }
    );

    map.current.geoObjects.add(multiRoute);
  };
  return (
    <YMaps query={{ lang: "ru_RU", apikey: "" }}>
      <div style={{ position: "relative" }}>
        <Map
          defaultState={{ center: [59.1311, 37.8822], zoom: 11.5 }}
          state={mapState}
          width="100%"
          height={650}
          modules={["multiRouter.MultiRoute"]}
          instanceRef={map}
          onLoad={addRoute}
          onClick={(e: any) => {
            const newCoords = e._sourceEvent.originalEvent.coords;
            setNewCoords(newCoords);
            _setCoordinates((prevState) => [...prevState, newCoords]);
          }}
        >
          {coordinates.map((coordinate, index) => (
            <Placemark
              key={`${index}-${coordinate}`}
              geometry={coordinate}
              options={{
                iconColor: "green",
                preset: "islands#greenStretchyIcon",
              }}
              properties={{ iconContent: `${index + 1}) ${coordinate}` }}
            />
          ))}
          <Polyline
            geometry={coordinates}
            options={{ strokeColor: "#0000FF", strokeWidth: 4 }}
          />
          <RouteEditor />
          <RouteButton options={{ float: "right" }} />
          <ZoomControl />
        </Map>
      </div>
    </YMaps>
  );
}

export default MapComponent;```