Create Magnifying glass for image with overlay react

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>