react konva zoom in and zoom out on mouse scroll on pointer location not working properly

Question

I'm trying to draw rectangle on an omage using react konva I want to draw a rectangle when the image is being zoomed in/Out w.r.t the mouse pointer position and mouse wheel event but the problem is the rectangle is drawn accornding to position of the image not the stage please help me in solving this

Please refer to the code i'm using to zoom in and out the image

zoom=()=>{
    var oldScale = this.refs.layer.attrs.scaleX;
            mousePointTo = {
                x: this.props.x / oldScale - this.refs.layer.attrs.x / oldScale,
                y: this.props.y/ oldScale - this.refs.layer.attrs.y / oldScale,
            };  
           newScale = this.props.variation > 0 ? oldScale * this.props.scaleBy : oldScale / this.props.scaleBy; 
            newPos = {
                x: -(mousePointTo.x - this.props.x / newScale) * newScale,
                y: -(mousePointTo.y - this.props.y / newScale) * newScale
            }; 

            this.setState({newposx:newPos.x,newposy:newPos.y,newScale:newScale})
    }

handleClick = (e) => {    

    if (this.state.isDrawing) {
      this.setState({
        isDrawing: !this.state.isDrawing,
      });
      return;
    }

    const newShapes = this.state.shapes.slice();
    newShapes.push({
      x: e.evt.layerX, 
      y: e.evt.layerY,
    });

    this.setState({
      isDrawing: true,
      shapes: newShapes,
    });

  }

  handleMouseMove = (e) => {
    if (!this.state.isDrawingMode) {
      return;
    }

    const mouseX = e.evt.layerX;  
    const mouseY = e.evt.layerY;


    if (this.state.isDrawing) {

      const currShapeIndex = this.state.shapes.length - 1;
      const currShape = this.state.shapes[currShapeIndex];


      const newWidth = mouseX - currShape.x;
      const newHeight = mouseY - currShape.y;

      const newShapesList = this.state.shapes.slice();
      newShapesList[currShapeIndex] = {
        x: currShape.x,
        y: currShape.y,
        width: newWidth,
        height: newHeight
      }

      this.setState({
        shapes: newShapesList,
      });
    }
  }

render() {

    return (
        <Stage
          ref='stage'
          width={this.props.width}
          height={this.props.height}
          onContentClick={this.handleClick}
          onContentMouseMove={this.handleMouseMove}
          draggable="true"
        >
          <Layer ref='layer' width={this.props.width}
          height={this.props.height} x={this.state.newposx}
              y={this.state.newposy}
              scaleX={this.state.newScale}
              scaleY={this.state.newScale}>
            <Image 
              width={this.props.width} 
              height={this.props.height} 
              image={this.props.image}  
              ref={(node) => {this.imageNode = node;}}    
            />

            {this.state.shapes.map((shape) => {
              return (
                <Group>
                  <Rect
                    x={shape.x}
                    y={shape.y}
                    width={shape.width}
                    height={shape.height}
                    isDrawingMode={this.state.isDrawingMode}
                    draggable="true"
                    }}
                  />
                </Group >
              );
            })}

          </Layer>
        </Stage>
      </div>
    );
  }
}