How to clip GeoTiff according to shapefile using javascript? - reactjs

Question

Situation: I am plotting data provided in a GeoTIFF file on a map using Reactjs and geoTiff.js. An example of the GeoTiff files I am using is at the following link: https://drive.google.com/file/d/1yc2Lo5vQrFPAJRe5VklorrvIXuhB1nE0/view.
What I want to do: When the user clicks on a specific state (district or any specific shape) then the data provided in the tiff file should be visible only for that shape. Basically, I want to clip the data in the GeoTIFF file according to a given shape (assuming I have the shape boundary definitions. Further the projection system of the shape boundaries and the GeoTiff file are the same).
Please suggest any approach using georaster, leaflet, georaster-layer-for-leaflet, or some other library.
Here is the code as of now to show whole tiff data on the map.
Code:
import { useEffect, useRef } from "react";
import proj4 from "proj4";
import { useLeafletContext } from "#react-leaflet/core";
import { useMap } from "react-leaflet";
import parseGeoraster from "georaster";
import GeoRasterLayer from "georaster-layer-for-leaflet";
window.proj4 = proj4;
const GeotiffLayer = ({ url, options }) => {
const geoTiffLayerRef = useRef();
const context = useLeafletContext();
const map = useMap();
useEffect(() => {
const container = context.layerContainer || context.map;
fetch(url)
.then((response) => response.arrayBuffer())
.then((arrayBuffer) => {
console.log(arrayBuffer);
parseGeoraster(arrayBuffer).then((georaster) => {
console.log("georaster:", georaster.values[0][1]);
options.georaster = georaster;
geoTiffLayerRef.current = new GeoRasterLayer(options);
container.addLayer(geoTiffLayerRef.current);
map.fitBounds(geoTiffLayerRef.current.getBounds());
});
});
// return () => {
// container.removeLayer(geoTiffLayerRef.current);
// };
}, [context, url, map, options]);
return null;
};
export default GeotiffLayer;
Output:
Fig 1 illustrates the whole tiff file shown on the map.
Fig 2 illustrates the output after a click on the specific state.
What I want to do: When the user clicks on the specific state then tiff data should be shown only for the selected shape, not for other shapes.
Please suggest any approach using georaster, leaflet, georaster-layer-for-leaflet, or some other library.