leaflet Map get greyed out when changing the centre

I have have a list of latlng clicking on which the map centre is set with that latlng. the issue occurs when I switch between the latlng the map is getting greyed out.

I have tried:-

1. Changing the leaflet map version
2. Using InvalidateSize function
3. Use panTo, flyTo instead of setView
4. Used leaflet internal reset function

Here is an plunker demo for the issue, Switch between location1 and location2 for 3-4 times. https://plnkr.co/edit/87cFuRJ7iBKn1cTeVPb9?p=preview

// Code goes here


setTimeout(() => {
  tiles = L.gridLayer.googleMutant({
    maxZoom: 20,
    type: 'roadmap',
    streetViewControl: true,
    continuousWorld: false
  });
  latlng = L.latLng(30.695267, 76.879746);
  displayedMap = L.map('map_canvas', {
    center: latlng,
    zoom: 13,
    layers: [tiles],
    fullscreenControl: {
      pseudoFullscreen: false // if true, fullscreen to page width and height
    },
    customControl: '<map-control/>',
    attributionControl: false,
    maxBoundsViscosity: 0.75,
    minZoom: 2,
    worldCopyJump: true,
    zoomControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    options: {},
    ourCustomControl: function(template) {}
  });

  L.DomEvent.on(document.getElementById('loc1'), 'click', function() {
    console.log('loc1 click')
    displayedMap.setView(L.latLng(30.695267, 76.879746), 13)
  })
  L.DomEvent.on(document.getElementById('loc2'), 'click', function() {
    console.log('loc2 click')
    displayedMap.setView(L.latLng(30.799228, 76.914633), 13)
  })
}, 200)

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
<!--<script src="leaflet.js"></script>-->
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.gridlayer.googlemutant@0.8.0/Leaflet.GoogleMutant.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<style>
  #map_canvas {
    width: 50vw;
    height: 50vh;
  }
</style>

<h1>Hello Plunker!</h1>
<div id="map_canvas"></div>
<button id="loc1" type="button">location1</button>
<button id="loc2" type="button">location2</button>