How to make a responsive tile area in leaflet

Question

I'm New to leaflet and game development. I have created a custom map to be displayed in leaflet. Map looks more like https://map.pavia.io/#/

I want to do the same mouse event functions like clicking one tile gives the co-ordinates (location) I have already done the code the click event but I can't figure out how can I achieve the dynamic svgOVerlay effect just like pavio.

I'm using React-leaflet in Next.js, Thanks in advance

my code for custom tile layer

  <TileLayer
    minZoom={0}
    maxZoom={3}
    url="../map/{z}_{x}_{y}.png"
  />

mouse click event

function MyComponent(){
    const map = useMapEvents({
       click:(e) => {
           console.log(e.latlag)}
     })
}