Grafana Text Panel Error in Drawing Leaflet Circle

I am trying to draw circle in Leaflet Map using Text Panel in Grafana (HTML mode) It gives error when i try to zoom in the map and also circle is not resizing on zoom

I wonder same code is working fine in standalone leaflet html page but it giving error in Grafana (v6.6.2)

Any solution for same? Thanks in advance

PFB code and error screenshot for reference

Blockquote

<!doctype html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>

  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

</head>
<body>
<button onclick="myFunction()">Click me</button>
<br>
<p id="demo"></p>
 <div id="map" style="width: 1200px; height: 500px;"></div>

<script> 
var map = L.map('map', {
    center: [44.35,-77.6],
    zoom: 4
});

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

function myFunction() 
{
    L.circle([44.35,-77.6], {radius: 500}).addTo(map);
}
 </script>
</body>
</html>

image