About stopping event propagation of Slider under React v.17

When calling stopPropagation of touch move event on parent will casing problems on Slider

Problem:
Unable to change the value of Slider by touch move.

Code:

<div onTouchMove={(e) => e.stopPropagation()}>
    <Slider defaultValue={10} min={0} max={40}/>
</div>

As I know, Slider will add touch move and touch end event listener to document when touch start, this work totally fine before React 17.

However since React 17, React attach event listeners to root element instead of document, and calling stopPropagation on React's synthetic event will exactly stop event bubble from root element to document, therefore Slider will not work as expected.

I wonder if there are any way to solve this problem? Thank you

Start with the Slider touch interaction entry points, especially the touch move and touch end listeners added after touch start, and reproduce the provided React 17 example with a parent onTouchMove handler calling stopPropagation. Investigate how React 17 root-level event delegation affects document listeners; done means the Slider value changes by touch move in that example without breaking existing touch behavior.