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>
<html>
   <head>
      <title>Image Overlay Example</title>
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
      <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
      <style type="text/css">
        html,
        body,
        #map {
          height: 100%;
          width: 100%;
          padding: 0px;
          margin: 0px;
        }
      </style>  
   </head>
   
   <body>
      <div id = "map"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [14, -85],
            zoom: 5
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
   //      var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
   //      map.addLayer(layer);  // Adding layer to the map
         
         var esriImages = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
    var esriLabels = new L.TileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}');
    var esri = L.layerGroup([esriImages, esriLabels]);
    
    //default basemap
    map.addLayer(esri);

         // Creating Image overlay
         var imageUrl = 'https://i.imgur.com/KNTRLHR.png';
         var imageBounds = [[30,-115], [6,-59.03836]];
         var overlay = L.imageOverlay(imageUrl, imageBounds,{ opacity:.7});
         overlay.addTo(map);

    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);
      });

      </script>
   </body>
   
</html>

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