Draw a polyline from starting position to current position

Question

I want to draw a polyline that's gonna show me what path the user has passed, but i always get

Polyline.setGeometry invalid argument error.

I tried following the official HERE API page example, but that showed the same error. I also tried following this How to Create an instance of a polyline in heremaps in javascript? but it showed me the same error.

This is my code:

navigator.geolocation.getCurrentPosition(
  (position) => {
    var tempString = new H.geo.LineString();
    var startingLat = position.coords.latitude;
    var startingLong = position.coords.longitude;
    var routePassedString = new H.geo.LineString();
    var defaultLayers = platform.createDefaultLayers();
    routePassedString.pushPoint({
      lat: startingLat,
      lng: startingLong
    });
    var defaultLayers = platform.createDefaultLayers();
    var parent = document.getElementById("mapContainer").parentNode;
    var mapContainer = document.getElementById("mapContainer");
    var map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
      center: {
        lat: startingLat,
        lng: startingLong
      },
      zoom: 30,
      pixelRatio: window.devicePixelRatio || 1
    });
    map.addObject(routePassedLine);
    window.addEventListener('resize', () => map.getViewPort().resize());
    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    var ui = H.ui.UI.createDefault(map, defaultLayers);
    var startIconElement = document.createElement('div');
    startIconElement.style.margin = '-20px 0 0 -20px';
    startIconElement.style.backgroundColor = 'darkorange';
    startIconElement.style.width = '15px';
    startIconElement.style.height = '15px';
    var startMarker = new H.map.DomMarker({
      lat: startingLat,
      lng: startingLong
    }, {
      icon: new H.map.DomIcon(startIconElement, {
        onAttach: function(clonedElement, domIcon, domMarker) {
          var clonedContent = startIconElement;
        },
        onDetach: function(clonedElement, domIcon, domMarker) {}
      })
    })
    startMarker.setData('<div><b>' + //srcLocSplit[r] + 
      '</b></div><div><b>Latitude: </b>' + startMarker.getGeometry().lat + '</div><div><b>Longitude: </b>' + startMarker.getGeometry().lng + '</div>');

    map.addObject(startMarker);
    setInterval(() => {
      navigator.geolocation.getCurrentPosition(function(pos) {
        routePassedString.pushPoint({
          lat: pos.coords.latitude,
          lng: pos.coords.longitude
        });
        map.removeObject(routePassedLine);
        routePassedLine.setGeometry(routePassedString);
        map.addObject(routePassedLine);
        startMarker.setGeometry({
          lat: pos.coords.latitude,
          lng: pos.coords.longitude
        });
      }, function() {}, {
        enableHighAccuracy: true
      });

    }, 1000);

  }
);