Dragging causes "wiggle" when resize handles are clicked

[atrauzzi]

Screencast.from.2023-12-20.19-31-02.webm

I'll do my best to explain, but basically what you're seeing in the video is an instance of rnd. If I don't drag the component at all, clicking the resize handles is fine and doesn't cause that horizontal wiggle/wobble. If I attempt to move the element in any direction however, it starts popping to one side or the other. The last thing I do at the end of the video is perform multiple drags "past" the bounds element. Even though the box doesn't move past the bounds, it still seems to be registering some change in value internally as the wiggle becomes wayyy more pronounced after doing so.

I have no clue what is causing this as I can observe the behaviour under just about every circumstance. But I feel like there might be state in the background that's changing when it shouldn't be??

This is basically what I have:

    <div
        ref={boxRef}
        style={{
            position: "relative",
            width: "100%",
            height: "100%",
        }}
    >
        <ul>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
            <li>one</li>
        </ul>
        <Rnd
            dragAxis="y"
            default={{
                x: 80,
                y: 0,
                width: "300px",
                height: "20px",
            }}
            bounds={boxRef.current}
            enableResizing={{
                bottom: true,
                top: true,
                left: false,
                right: false,
                topLeft: false,
                topRight: false,
                bottomLeft: false,
                bottomRight: false,
            }}
            dragGrid={[20,20]}
            resizeGrid={[20,20]}
        >
            <div
                style={{
                    width: "100%",
                    height: "100%",
                    backgroundColor: "#18058F6F",
                    borderRadius: "5px",
                }}
            />
        </Rnd>
    </div>

[JChouCode]

I think it's a problem with dragAxis "y", its a bug that hasn't been fixed yet.

[bokuweb]

@atrauzzi Sorry, thanks for your report. Could you please provide project in codesandbox?