I am trying to compare two maps in react compare component, there are two maps side by side and all I want is when I drag one map it should be followed by second map in the second part of screen, so far I was able to drag them together. If I drag the left map it drags the right one with it (act like a single map, only shows the separator line) but it is lagging behind the left, this happens with the either of them ( if left one is dragged right one lags and vice versa). So is there any method or property to smoothen the dragging?

Here is my code snippet :-

initMap = (mapProps, map) => {
var self = this;
const { google, google1, map1 } = mapProps;
this.setState((state) => ({
  ...state,
  google: google,
  map: map
}))
// draw all the waypoints of mission and fence on map
if (this.state.compare) {
  google.maps.event.addListener(map, 'center_changed', () => {
    this.setState((state) => ({
      ...state,
      center: map.getCenter()
    }))
  });
  google.maps.event.addListener(map, 'drag', () => {
    this.setState((state) => ({
      ...state,
      center: map.getCenter()
    }))
  });
  google.maps.event.addListener(map, 'dragstart', () => {
    this.setState((state) => ({
      ...state,
      center: map.getCenter()
    }))
  });
  google.maps.event.addListener(map, 'mousemove', () => {
    this.setState((state) => ({
      ...state,
      center: map.getCenter()
    }))
  });

  google.maps.event.addListener(map, 'idle', () => {
    this.setState((state) => ({
      ...state,
      center: map.getCenter()
    }))
  });
  google.maps.event.addListener(map, 'zoom_changed', () => {
    this.setState((state) => ({
      ...state,
      zoom: map.getZoom(),
    }))
  });
 }    

This is how it looks

The above code is for the first map, same code is used for second map.