Conditionally rendering dropzones causes drag offset

[sheam]

• I have rows (bootstrap) in which my items are wrapped in droppables, and columns (bootstrap): Row -> Droppable -> Column -> Draggable -> MyListItem
• I need to conditionally render extra Droppables (row placeholders) within my list of rows once the user starts dragging, so that I can create new rows: Row -> Droppable -> Column -> "drop here to create new row". These are only rendered when 'showRowPlaceholders' is true.
• By rendering these items it causes an offeset in the drag.
• in the onBeforeCapture() event, I call my setShowRowPlaceholders() which causes the extra dropzones to be rendered.
• in the onDragStart() event I store the source.droppableId so that I know if I am dragging over the source dropzone or another one. (don't think this is relavant to my issue)
• Functionally everything works.... but there is a bad offset on the drag, especially if dragging an item from the bottom of the page.
• I believe The offset is caused by conditially rendering of the row placeholders.
• if I render the row placeholders always, I do not get the offset issue.
• I have also tried using 'display: none' instead of conditionally rendering, but it is the same issue.

I have tried using onBeforeDragStart() (which fires before onBeforeCatpure()) to setShowRowPlaceholders(), but there are issues with this as well:

• the MyListItem is now rendered in the correct position, but the 'hit detection' still has the same offset problem. i.e., the MyListItem rendders right on the cursor (good), but the where the items is dropped (snapshot.isDraggingOver) is offset by the height of the row place holders.
• For some reason it won't let me drop on the row placeholders either which I don't understand.

I know this is a dead project, but does anyone have any examples of conditionally rendering extra droppables with non-zero height during the drag?