Resizing got weird behavior after setting a height in onResizingStop

[nwonghirunde]

I have question on the behavior of resizing. I would like to build a resizable panel. like this image

I want the below box to have 3 state height like 100%, 50% and 10%. I try write onResizeStop like this to make it work

 const onResizeStop = (e, direction, ref, delta) => {
        const height = parseFloat(ref.style.height);
        switch (this.state.panelHeight){
          case 100%:
            if(height < 30){
              this.setState({panelHeight: 10%});
              break;
            }
            else if(height < 80){
              this.setState({panelHeight: 50%});
              break;
            }
            this.setState({panelHeight: 100%});
            break;

          case 50%:
            if(height > 70){
              this.setState({panelHeight: 100%});
              break;
            }
            else if(height < 30){
              this.setState({panelHeight: 10%});
              break;
            }
            this.setState({panelHeight: 50%});
            break;

          case 10%:
            if(height > 70){
              this.setState({panelHeight: 100%});
              break;
            }
            else if(height < 30){
              this.setState({panelHeight: 50%});
              break;
            }
            this.setState({panelHeight: 10%});
            break;
        }
      }
}

after I test and I found that something make change to transform attribute and it make a box shifted. so I put ref.style.transform = "translate(0px, 0px)" on onResizingStop to make it snap to the same place. there is still one issue that when after first resizing. the box will not start the position at it's 0,0 when resizing. I suspect that because the resize function it update resizingPosition field inside the component. is there a way to remove this kind of behavior? I want resizing to always start from 0,0.

I'm using react-rnd version [10.4.1]

My browser is: Google Chrome