Fitting an imageOverlay in lealfet - Mine Does not fit even with correct corner coordinates

Using latest leaflet library, I generated a plot in python from a GraDs file and supposedly I have the correct corners or bounds, but when overlaying in leaflet does not fit.

here is the simple code

<!DOCTYPE html>
      <title>Image Overlay Example</title>
      <link rel="stylesheet" href="" />
      <script src=""></script>
      <style type="text/css">
        #map {
          height: 100%;
          width: 100%;
          padding: 0px;
          margin: 0px;
      <div id = "map"></div>
         // Creating map options
         var mapOptions = {
            center: [14, -85],
            zoom: 5
         var map = new'map', mapOptions); // Creating a map object
         // Creating a Layer object
   //      var layer = new L.TileLayer('http://{s}{z}/{x}/{y}.png');
   //      map.addLayer(layer);  // Adding layer to the map
         var esriImages = new L.TileLayer('{z}/{y}/{x}');
    var esriLabels = new L.TileLayer('{z}/{y}/{x}');
    var esri = L.layerGroup([esriImages, esriLabels]);
    //default basemap

         // Creating Image overlay
         var imageUrl = '';
         var imageBounds = [[30,-115], [6,-59.03836]];
         var overlay = L.imageOverlay(imageUrl, imageBounds,{ opacity:.7});

    map.on('click', function(e) {
       // var popup = L.popup()
       //   .setLatLng(e.latlng)
       //   .setContent('<p>Hello, world!</p>')
       //   .openOn(map);

       console.log ('click en ',e.latlng);


The representation of the image is like this as per NOAA site but is poor quality and also if i overlay does not fit. enter image description here

What is the issue or how to fix it.

Thanks for any help