Bug: Conditionally update positions onResizeStop causes strange jiggle

[donrsh]

Overview of the problem

I'm using react-rnd 10.4.1 [x.x.x]

My browser is: Chrome 108.0.5359.125 on Windows

I am sure this issue is not a duplicate?

Reproduced project

https://codesandbox.io/s/react-rnd-conditionally-resize-jiggle-cvkm8d?file=/src/App.tsx

Description

I want to implement a rnd block in controlled mode, with the constraint that if the block violates some rules (in the above case, the rule is cross the black line) when resizing, then bypass the operation.

It seems to work after resizing. However, when refocus on the rnd block, a strange jiggle happened. But the states (x/y/width/height) aren't changed.

Steps to Reproduce

1. Resize the rnd block (the red block) from the right-top anchor to cross the black line.
2. Refocus the rnd block and observe it moves without state changes.

Expected behavior

The rnd block stays where it was before resizing

Actual behavior

The rnd block moves.

[donrsh]

I came up with a workaround. The idea is setting a key on the Rnd element, and update the key if the onResizeStop doesn't commit the resize, to clean up the broken Rnd element. The codes would be like:

function MyRnd() {
const [state, setState] = useState({x, y, width, height })
const [key, updateKey] = useReducer(x => x + 1, 0)

const onResizeStop = useCallback(() => {
  if (!shouldCommitResize()) {
    updateKey();
    return;
  }
  setState(newState);
});

return (
  <Rnd
    key={key}
    position={{...}}
    size={{...}}
    onResizeStop={onResizeStop}
   />
);
}

I've implemented this on the issue codesandbox