Leaflet.js: Cropping tiles based on polygons of specific fields

Question

I'm working on integrating satellite data into my Leaflet.js map using Sentinel Hub's WMS service. Currently, I have a function getSateliteData which fetches the data and displays it on the map. Here's a simplified version of the function:

export async function getSateliteData(map: any, L: any, sateliteLayer: any) {
  const landsData = await getLandsData()
  const baseUrl =
    "https://services.sentinel-hub.com/ogc/wms/c9815cf1-*************"
  const layerId = "NDVI"
  const timeRange = "time: '2024-02-11/2024-01-26'" // Adjust as needed


  // Clear existing layers
  if (sateliteLayer.value) {
    sateliteLayer.value.clearLayers()
  } else {
    sateliteLayer.value = L.layerGroup().addTo(map)
  }

  // Initialize min and max coordinates
  let minLat = Infinity,
    minLng = Infinity,
    maxLat = -Infinity,
    maxLng = -Infinity

  // Find the min and max coordinates from all lands
  for (const land of landsData) {
    const coordinates = land.lpisGeojson.geometry.coordinates[0]
    for (const coordinate of coordinates) {
      const [lng, lat] = coordinate
      minLat = Math.min(minLat, lat)
      minLng = Math.min(minLng, lng)
      maxLat = Math.max(maxLat, lat)
      maxLng = Math.max(maxLng, lng)
    }
  }

  // Create a LatLngBounds object from the min and max coordinates
  const bounds = L.latLngBounds(
    L.latLng(minLat, minLng), // South-west corner
    L.latLng(maxLat, maxLng) // North-east corner
  )

  // Create a WMS layer using the bounds
  const layer = L.tileLayer.wms(baseUrl, {
    attribution:
      '&copy; <a href="http://www.sentinel-hub.com/" target="_blank">Sentinel Hub</a>',
    tileSize: 256,
    maxcc: 20,
    layers: layerId,
    time: timeRange,
    gain: "0.3",
    gamma: "0.8",
    upsampling: "BICUBIC",
    opacity: 0.8,
    maxNativeZoom: 25,
    minNativeZoom: 12,
    minZoom: 0,
    maxZoom: 30,
    transparent: "true",
    format: "image/png",
    crs: L.CRS.EPSG4326,
    bounds: bounds, // Bounds option to restrict the layer to the bounding box
  })

  sateliteLayer.value.addLayer(layer)
  console.log(sateliteLayer.value)
}

However, I'm facing an issue with restricting the satellite data to be displayed only inside specific polygons. I attempted to achieve this by passing a GEOMETRY parameter in the WMS request with the polygon coordinates, but this resulted in either too many requests on Sentinel's side or too long URI due to the complex geometry.

Here's how the map currently looks like:

Does anyone have suggestions on how to efficiently restrict the satellite data to be displayed only inside my polygons without causing excessive requests or URI length issues?

Thank you!