Draggable item shifts to the right by a lot when dragging

[mdodge-ecgrow]

I am implementing a Drag and Drop functionality inside a modal in my app. The modal slides in from the right side and takes up 66vw. I am guessing that the modal styles, like the transform possibly is what is pushing the draggables over to the right when dragging.
Modal styles:

element {
  position: absolute;

  top: 0px;

  bottom: 0px;

  right: 0px;

  width: 66vw;

  max-height: 100%;

  margin: 0px;

  border: 1px solid rgb(204, 204, 204);

  filter: blur(0px);

  opacity: 1;

  visibility: visible;

  outline: 0px;

  font-size: 1.1em;

  background-color: rgb(255, 255, 255);

  overflow: hidden;

}
.ReactModal__Content--after-open.sliding-modal {
  opacity: 1;

  transform: translateX(0);

  box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.5);

}
.ReactModal__Content.sliding-modal {
  height: 100vh;

  opacity: 0;

  transform: translateX(66vw);

  box-shadow: -2rem 2rem 2rem transparent;

  transition: all 600ms ease-in-out;

}

Here is a screenshot of my modal with 2 drag and drop items in the middle.

And then here is a screenshot of what it looks like when I just start to drag an item, I have not moved it barely at all at this point.

[mdodge-ecgrow]

From a lot of trial and error and fiddling with that vw number, I came to this result which seems to fix the jankiness to be almost unnoticable.

<Draggable draggableId={ind.toString()} index={ind}>
			{(provided, snapshot) => {
				const style = {
					...provided.draggableProps.style,
					left: snapshot.isDragging ? '14.85vw' : '0'
				};
				return (
					<div
						{...provided.draggableProps}
						{...provided.dragHandleProps}
						ref={provided.innerRef}
						className={'rule mb-4'}
						style={style}
					>
					...

I have no idea why that is the magic number, doesn't seem to relate in any way to the 66vw number. Obviously this feels extremely hacky and fragile. If anyone knows of a better fix, I am all ears.

[mdodge-ecgrow]

And as I suspected, when I resize the window, it is off again. Ugh!
I would think it should just obey the container and maintain properties of the container.

[mdodge-ecgrow]

I have created a sandbox to show what I am talking about. I was able to duplicate it. Open the sliding modal and then try dragging a rule. You will see the rule get shifted to the right.
https://codesandbox.io/p/sandbox/nostalgic-lewin-dxz9qg?file=%2Fsrc%2FApp.js

[mdodge-ecgrow]

Aw, so looks like this is a known issue: #560
Can someone explain to me how to "reparent the draggable"?