selected text cause parent container mouseup is not triggered

Following is my code, see my gif, when select text and drag, cannot drag “it” and “mouseup” is not triggered cause dragStart always true, I know set user-select:none can fix this bug, but I expect way keep user select text and can drag

var c: HTMLDivElement
var it: HTMLDivElement
ReactDOM.render(<div ref={e => c = e} style={{border: “1px solid black”}}>
<div ref={e => it = e} style={{width: 300, height: 300, backgroundColor: “pink”}}>it</div>
</div>, document.querySelector(“#root”))

var startY: number
var startTranslateY: number
var dragStart: boolean
c.addEventListener(“mousedown”, (ev) => {
startY = ev.clientY
startTranslateY = it.getBoundingClientRect().y – c.getBoundingClientRect().y
dragStart = true
console.log(“start”)
})

c.addEventListener(“mousemove”, (ev) => {
if (dragStart) {
it.style.transform = `translateY(${startTranslateY + ev.clientY – startY}px)`
}
})

window.addEventListener(“mouseup”, () => {
dragStart = false
console.log(“end”)
})