Using an OpenLayers heatmap on a Google Maps map instance – disabling heatmap interaction

I’m attempting to build a crime heatmap of my area with OpenLayer for the heatmap and maps API for other things. Didn’t stick to google visualization due to another error I encountered from their end (as seen in my post history)

I need to make sure the overlay is not interactable. As of now, I cannot drag the map around, but I can do so with the overlay. The heatmap zooms in out and and pans instead of sticking to the map. I tried troubleshooting through documentation and set the stopEvent to true, while also disabling pointer-events. Nothing seems to have worked. Below is my code for the same. Window.mp is the map.

fetch('/static/crimedata/parsedNeighborHoods.json')
.then(function(response) {
  return response.json();
})
.then(function(data) {
  var features = [];

  // Loop through the data and create Point features with the latitude and longitude coordinates
  for (var key in data) {
    var item = data[key];
    var coordinate = ol.proj.fromLonLat([parseFloat(item.longitude), parseFloat(item.latitude)]);
    var feature = new ol.Feature(new ol.geom.Point(coordinate));
    features.push(feature);
  }

  // Create a vector source with the features
  var vectorSource = new ol.source.Vector({
    features: features
  });

  // Create a heatmap layer
  var heatmapLayer = new ol.layer.Heatmap({
    source: vectorSource, // Set the source to the vector source
    radius: 10, // Set the radius of the heatmap points
    gradient: ['blue', 'cyan', 'lime', 'yellow', 'red'] // Set the gradient colors
  });

  // Add the heatmap layer to the OpenLayers map
  var olMap = new ol.Map({
    target: 'map', // Set the target DOM element
    layers: [
      // Add any other layers you may have
      heatmapLayer // Add the heatmap layer
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([-87.623177, 41.881832]), // Set the initial center
      zoom: 12 // Set the initial zoom level
    })
  });

  // Convert the OpenLayers map to a Google Maps overlay
  olMap.once('ready', function() {
    var olOverlay = new ol.Overlay({
      element: document.getElementById('mapOverlay'), // Use a different parent element
      position: ol.proj.fromLonLat([-87.623177, 41.881832]),
      positioning: 'center-center',
      stopEvent: true, // Allow events to propagate through the overlay
      insertFirst: false // Append the overlay element as the last child of its parent
    });
    olMap.getInteractions().forEach(function(interaction) {
      if (interaction instanceof ol.interaction.KeyboardPan ||
          interaction instanceof ol.interaction.KeyboardZoom ||
          interaction instanceof ol.interaction.DragPan ||
          interaction instanceof ol.interaction.DragZoom ||
          interaction instanceof ol.interaction.MouseWheelZoom ||
          interaction instanceof ol.interaction.PinchRotate ||
          interaction instanceof ol.interaction.PinchZoom) {
        interaction.setActive(false);
      }
    });
    olOverlay.setMap(window.mp); // Use the olMap instance as the map for the overlay

    // Hide the overlay
    olOverlay.setPosition(undefined);

    // Disable the heatmap layer
    heatmapLayer.setVisible(false);

    // Add an event listener to the overlay close button to re-enable the heatmap layer
    document.getElementById('closeOverlay').addEventListener('click', function() {
      olOverlay.setPosition(undefined);
      heatmapLayer.setVisible(true); // Re-enable the heatmap layer
    });
  });
})
.catch(function(error) {
  console.error('Error: ', error);
});

I am also unable to click on the google maps buttons like zoom in and street view. Thanks!