How can I fit a rectangular image to a polygon Openlayers v7?

Question

I need to fit the image to the geometry of the feature. this is my code (
I'm using Angular 14 and openlayers 7):

    this.map.on('click', (e) => {
      const feature = map.forEachFeatureAtPixel(e.pixel, function(feature: any){
        return feature;
      });
      
      if (feature) {
        const geometry = feature.getGeometry();
        const extent = geometry.getExtent();

        let imageLayer = new ImageLayer({
          source: new Static({
            url: "assets/rhino.jpg",
            projection: this.map.getView().getProjection(),
            imageExtent: extent,
          }),
          className: 'image'
        });

        imageLayer.setOpacity(0.5);
        this.map.addLayer(imageLayer);
      }
      
    })

The result I get with this code is:

Picture Example

but as you can see the image only fits square or rectangular geometry. How can I adjust it to other types of geometries?