synced cursor on leaflet map sync

https://github.com/jieter/Leaflet.Sync

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://jieter.github.io/Leaflet.Sync/L.Map.Sync.js"></script>
<body>

  <div id="first">
  </div>

  <div id="second">
  </div>

</body>

CSS

#first {
  position: absolute;
  height: 200px;
  width: 200px;
}

#second {
  position: absolute;
  top: 250px;
  height: 200px;
  width: 200px;
}

JavaScript

var mapA = L.map('first').setView([18, 75], 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18
}).addTo(mapA);


var mapB = L.map('second').setView([18, 75], 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18
}).addTo(mapB);

mapA.sync(mapB, {syncCursor: true});
mapB.sync(mapA, {syncCursor: true});
//mapB.sync(mapS);