I implemented a draggable textarea using react-rnd by having the textarea component inside of the react-rnd component. Now when I try to select the text inside the textarea by using the cursor and if I accidentally go out of the react-rnd component, the selection changes.

The problem is illustrated in the gif image below. Here, I try to select the text from 'o' and go in the reverse direction and when I go out of the textbox, the selection changes and everything after that 'o' letter is selected. How to retain the original selection 'hello' in this case even when I go out of the react-rnd component.

The problem does not occur if I take the textarea out of the draggable component. I am struck with this issue for more than 2 days and I am yet to find a solution for this.

I created the replica of my issue in the below codesandbox.

https://codesandbox.io/s/lucid-sky-bl33e?file=/src/App.js