Create Magnifying glass for image with overlay react - css

Question

I have a image and svg rect as overlay. when i try the react-image-magnifiyer and it working normally. but when i try to overlay with svg the magnifier didn't work. please guide me how to create magnifier on image hover with svg rect as overlay
JSX:
<div class="img-overlay-wrap" style={{ marginLeft: "27%" }}>
<img src={object.base64} style={{ height:`512` , width:`512`}} alt="" />
<svg style={{ display: (this.state.isHide ? 'block' : 'none') }} width="512" height="512" >
{
object.bbox.map((val,index)=>
<g>
<rect x={object.bbox[index][0]} y={object.bbox[index][1]} width={object.bbox[index][2]} height={object.bbox[index][3] }
style={{stroke:"red",paddingTop:"50px",strokeWidthTop:"20px"}} fill-opacity="0.0" />
</g>
)
}
</svg>
</div>
my attempt:
<div class="img-overlay-wrap" style={{ marginLeft: "27%" }}>
<GlassMagnifier className='img-overlay-wraps' imageSrc={object.name} />
<svg style={{ display: (this.state.isHide ? 'block' : 'none') }} width="512" height="512" >
{
object.bbox.map((val,index)=>
<g>
<rect x={object.bbox[index][0]} y={object.bbox[index][1]} width={object.bbox[index][2]} height={object.bbox[index][3] }
style={{stroke:"red",paddingTop:"50px",strokeWidthTop:"20px"}} fill-opacity="0.0" />
</g>
)
}
</svg>
</div>