reactjs - onDblClick in react-konva not working -

i'm using react-konva render canvas. assign ondblclick group, assign onclick, ondragend group. in ondragend handler, have axios post request server. whenever double click group, ondragend event fired. know problem here ?

here code

handlemoving(){      var thiselement = this.refs[this.state.key];      this.setstate({         x: thiselement.x(),         y: thiselement.y(),         width: thiselement.getwidth(),         height: thiselement.getheight()     });      this.focus(); }  handledoubleclick(){     console.log('dbclick');     this.focus();     const stage = this.refs[this.state.key+'_wrapper'].getparent().getparent().getparent();     const pos = this.refs[this.state.key].getabsoluteposition();     document.getelementbyid('newtext').addeventlistener('keydown',this.handletextchange);     document.getelementbyid('newtextwrapper').style.position = "absolute";     document.getelementbyid('newtextwrapper').style.left = pos.x+"px";     document.getelementbyid('newtextwrapper').style.top = pos.y+20+"px";     document.getelementbyid('newtext').style.width = this.refs[this.state.key+'_wrapper'].getwidth()+"px";     document.getelementbyid('newtextwrapper').style.display = 'block';  }  synctoserver(){     axios.post('/api/element/text/update',{         uid:this.state.uid,         key:this.state.key,         content:this.state.content,         stage:{             x:this.state.x + this.refs[this.state.key].getparent().x(),             y:this.state.y + this.refs[this.state.key].getparent().y(),             width:this.state.width,             height:this.state.height,             fontsize:this.state.fontsize         }     }).then(function(response){         console.log(response.data);     }); }  render(){     return (         <layer>             <group  ondblclick = {this.handledoubleclick}                     onclick = {this.handleclick}                     ondragmove = {this.handlemoving}                     ondragend = {this.synctoserver}                     draggable = "true">                 <rect   ref = {this.state.key + '_wrapper'}                         x = {this.state.x}                         y = {this.state.y}                         width = {this.state.width}                         height = {this.state.height}                         visible = {false}                         fill = 'lightgrey'                         cornerradius = {3}>                  </rect>                 <text   ref = {this.state.key}                          x = {this.state.x}                          y = {this.state.y}                          fontsize = {this.state.fontsize}                         fontfamily = {this.state.fontfamily}                         text = {this.state.content}                         fill = {this.state.color}                         padding = {20}                         >                 </text>             </group>         </layer>     ); }