Advice to hardlink two maps

[artyomb]

Please help me to hard sync two maps (center, zoom, bearing, pitch) to unsure there won't be desynced frames.
Ideally within single animation frame.

Current syncMaps method causes delayed and desynchronized map positions during interactions.

const map1 = new maplibregl.Map({
  container: 'map1',
  style: 'first-style-url'
});

const map2 = new maplibregl.Map({
  container: 'map2',
  style: 'second-style-url'
});

function syncMaps(mapA, mapB) {
  mapA.on('move', () => {
    const center = mapA.getCenter();
    const zoom = mapA.getZoom();
    const bearing = mapA.getBearing();
    const pitch = mapA.getPitch();
    mapB.jumpTo({center, zoom, bearing, pitch});
  });
}

syncMaps(map, map_base);

[HarelM]

You might want to listen to the render event?

[artyomb]

Could someone please provide a working code snippet?