How to use drop-shadow on SVG?

I am using an SVG on top of an image to make that specific part of the image clickable, and I am trying to make if you hover on the svg region the drop-shadow property changes colour.

This is the Image

And this is the code I have written

<div class="parent">
      <svg version="1.1" viewBox="0 0 735 916">
        <image width="735" height="916" href={pathToImage}></image>{" "}
        <a href="/">
          <rect
            class="child"
            x="539"
            y="642"
            fill="#fff"
            opacity="0"
            width="166"
            height="174"
          ></rect>
        </a>
      </svg>
    </div>

CSS

.parent {
  width: 100%;
  max-width: 800px;
  height: auto;
  z-index: 1;
}

.child {
  transition: 0.4s;
  mix-blend-mode: lighten; /* work the best with the default black fill of svg shapes */
  cursor: pointer;
  z-index: 2;
}
.child:hover {
  -webkit-filter: drop-shadow(3px 3px 2px rgba(255, 162, 0, 0.876));
  filter: drop-shadow(3px 3px 2px rgba(255, 153, 0, 0.935));
}

I have used z-index to make sure the hover effect comes on top of the image. But this does not work and I am unable to figure out why.

I cannot put the child tag in svg tag because then the image is not responsive. As if you resize the image the image responds but the svg position on top remains intact.

How can I use the drop-effect here?