Marker pop up is not aligning on rotate

Not sure why the popup(s) do not align with the marker's on rotate like in the below screen unlike in the example.
<!DOCTYPE html>
<html lang="en">

<head>
  <base target="_top">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Mobile tutorial - Leaflet</title>

  <link rel="shortcut icon" type="image/x-icon"
    href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    crossorigin=""></script>

  <script
    src="https://unpkg.com/leaflet-rotate@0.2.8/dist/leaflet-rotate-src.js"></script>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }

    .leaflet-container {
      height: 400px;
      width: 600px;
      max-width: 100%;
      max-height: 100%;
    }
  </style>

  <style>
    body {
      padding: 0;
      margin: 0;
    }

    #map {
      height: 100%;
      width: 100vw;
    }
  </style>
</head>

<body>

  <div id='map'></div>

  <script>
    let latitude = 49.38225199447305;
    let longitude = -122.1169636931414;
    latitude = 49.303882;
    longitude = -122.114965;
    var stopIcon = L.icon({
        // iconAnchor: [14, 35],
        iconRetinaUrl: stop.realTimesAvailable ? 'marker-b.png' : 'marker-r.png',
        iconSize: [28, 35],
        iconUrl: stop.realTimesAvailable ? 'marker-b.png' : 'marker-r.png',
        // popupAnchor: [1, -35],
        shadowAnchor: [3, 34],
        shadowRetinaUrl: 'marker-shadow.png',
        shadowSize: [28, 39],
        shadowUrl: 'marker-shadow.png',
      });

    const map = L.map('map', {
        center: [latitude, longitude],
        // layers: L.mapquest.tileLayer('map'),
        zoom: 10,
        zoomAnimation: false, /* DEBUG: L.Renderer._updateTransform() */
        rotate: true,
        rotateControl: {
          closeOnZeroBearing: false,
          position: 'bottomright',
        },
        bearing: 0,
        // attributionControl: false,
        // zoomControl: false,
        // compassBearing: true,
        // trackContainerMutation: false,
        shiftKeyRotate: true,
        // touchGestures: true,
        touchRotate: true,
      // touchZoom: true
    }).fitWorld();

    const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    function onLocationFound(e) {
      const radius = e.accuracy / 2;

      var stopIcon = L.icon({
        iconAnchor: [14, 35],
        iconRetinaUrl: stop.realTimesAvailable ? 'marker-b.png' : 'marker-r.png',
        iconSize: [28, 35],
        iconUrl: stop.realTimesAvailable ? 'marker-b.png' : 'marker-r.png',
        popupAnchor: [1, -35],
        shadowAnchor: [3, 34],
        shadowRetinaUrl: 'marker-shadow.png',
        shadowSize: [28, 39],
        shadowUrl: 'marker-shadow.png',
      });

      const locationMarker = L.marker(e.latlng, {
        // icon: stopIcon
       }).addTo(map)
        .bindPopup(`You are within ${radius} meters from this point`);

        latitude = e.latlng[0] - 0.00003;
        longitude = e.latlng[1] - 0.00003;

      const locationCircle = L.circle(e.latlng, radius).addTo(map);
    }

  const locationMarker2 = L.marker([latitude, longitude], {
    // icon: stopIcon
  }).addTo(map)
    .bindPopup(`You are within x meters from this point 2`);

    function onLocationError(e) {
      alert(e.message);
    }

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    // map.locate({ setView: true, maxZoom: 10 });

    /*
    L.marker([49.406953, -122.718538], {
        draggable: true,
        // icon: stopIcon
      })
        // keepInView: true  is not allowing to drag map
        // .bindPopup(popUp, { maxHeight: 210, maxWidth: 100 });
        .bindPopup("Content here", { maxHeight: 210, maxWidth: 150, content: "content goes here" })

        // allMarkers[stop["stopCode"]] = marker;
        // allMarkers[stop.stopCode]
        .addTo(map);*/
  </script>

</body>

</html>
Raruto / leaflet-rotate

Marker pop up is not aligning on rotate #51
