diff --git a/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx b/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx
index 31663b8147..2e3bd97059 100644
--- a/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx
+++ b/webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx
@@ -28,7 +28,7 @@ import { webviewInitialState } from '../webviewSlice'
 import { getThemeValue, hexToRGB, ThemeProperty } from '../../../util/styles'
 import * as EventCurrentTargetDistances from '../../../shared/components/dragDrop/currentTarget'
 
-const getHeaders = () => screen.getAllByRole('columnheader')
+const getHeaders = (): HTMLElement[] => screen.getAllByRole('columnheader')
 
 jest.mock('../../../shared/api')
 jest.mock('../../../shared/components/dragDrop/currentTarget', () => {
@@ -489,7 +489,7 @@ describe('ComparisonTable', () => {
 
       const [, draggedHeader] = getHeaders()
 
-      expect(draggedHeader.isSameNode(startingNode)).toBe(true)
+      expect(draggedHeader.isEqualNode(startingNode)).toBe(true)
     })
 
     it('should wrap the drop target with the header we are dragging over', () => {
@@ -503,26 +503,25 @@ describe('ComparisonTable', () => {
 
       // eslint-disable-next-line testing-library/no-node-access
       expect(headerWrapper.childElementCount).toBe(2)
-      expect(headerWrapper.contains(endingNode)).toBe(true)
+      expect(
+        // eslint-disable-next-line testing-library/no-node-access
+        Object.values(headerWrapper.children)
+          .map(child => child.id)
+          .includes(endingNode.id)
+      ).toBe(true)
     })
 
     it('should not change the order when dropping a header in its own spot', () => {
       renderTable()
 
-      const [startingAndEndingNode, secondEndingNode] = getHeaders()
+      const [startingNode] = getHeaders()
 
-      dragAndDrop(
-        startingAndEndingNode,
-        startingAndEndingNode,
-        DragEnterDirection.RIGHT
-      )
+      dragAndDrop(startingNode, startingNode, DragEnterDirection.RIGHT)
       expect(mockPostMessage).not.toHaveBeenCalled()
 
-      dragAndDrop(
-        startingAndEndingNode,
-        secondEndingNode,
-        DragEnterDirection.RIGHT
-      )
+      const [start, end] = getHeaders()
+
+      dragAndDrop(start, end, DragEnterDirection.RIGHT)
       expect(mockPostMessage).toHaveBeenCalled()
     })
 
diff --git a/webview/src/shared/components/dragDrop/DragDropContainer.tsx b/webview/src/shared/components/dragDrop/DragDropContainer.tsx
index bf468cd3d4..ff24c738d5 100644
--- a/webview/src/shared/components/dragDrop/DragDropContainer.tsx
+++ b/webview/src/shared/components/dragDrop/DragDropContainer.tsx
@@ -291,23 +291,28 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
   const wrappedItems = items
     .map(draggable => {
       const id = draggable.props.id
-      const itemProps = {
-        cleanup,
-        disabledDropIds,
-        draggable,
-        draggedId,
-        id,
-        onDragEnter: handleDragEnter,
-        onDragLeave: handleDragLeave,
-        onDragOver: handleDragOver,
-        onDragStart: handleDragStart,
-        onDrop: handleOnDrop,
-        shouldShowOnDrag
-      }
-
-      const item = <DragDropItem key={draggable.key} {...itemProps} />
+      const isDraggedOver =
+        id === draggedOverId && (hoveringSomething || !parentDraggedOver)
+
+      const item = (
+        <DragDropItem
+          key={draggable.key}
+          cleanup={cleanup}
+          disabledDropIds={disabledDropIds}
+          draggable={draggable}
+          id={id}
+          onDragEnter={handleDragEnter}
+          onDragLeave={handleDragLeave}
+          onDragOver={handleDragOver}
+          onDragStart={handleDragStart}
+          onDrop={handleOnDrop}
+          draggedId={draggedId}
+          shouldShowOnDrag={shouldShowOnDrag}
+          isDiv={isDraggedOver && shouldShowOnDrag}
+        />
+      )
 
-      if (id === draggedOverId && (hoveringSomething || !parentDraggedOver)) {
+      if (isDraggedOver) {
         const isAfter = isEnteringAfter(direction)
         const target = isExactGroup(draggedOverGroup, draggedRef?.group, group)
           ? getTarget(
@@ -319,10 +324,11 @@ export const DragDropContainer: React.FC<DragDropContainerProps> = ({
 
         return (
           <DragDropItemWithTarget
-            {...itemProps}
             key={draggable.key}
             isAfter={isAfter}
             dropTarget={target}
+            shouldShowOnDrag={shouldShowOnDrag}
+            draggable={draggable}
           >
             {item}
           </DragDropItemWithTarget>
diff --git a/webview/src/shared/components/dragDrop/DragDropItem.tsx b/webview/src/shared/components/dragDrop/DragDropItem.tsx
index acf3ffd1cf..3091369689 100644
--- a/webview/src/shared/components/dragDrop/DragDropItem.tsx
+++ b/webview/src/shared/components/dragDrop/DragDropItem.tsx
@@ -1,6 +1,6 @@
 import React, { DragEvent } from 'react'
 
-export interface DragDropItemProps {
+interface DragDropItemProps {
   id: string
   draggable: JSX.Element
   onDragStart: (e: DragEvent<HTMLElement>) => void
@@ -29,7 +29,7 @@ export const DragDropItem: React.FC<DragDropItemProps> = ({
   draggedId,
   isDiv
 }) => {
-  const Type = isDiv ? 'div' : draggable?.type
+  const Type = isDiv ? 'div' : draggable.type
   return (
     <Type
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/webview/src/shared/components/dragDrop/DragDropItemWithTarget.tsx b/webview/src/shared/components/dragDrop/DragDropItemWithTarget.tsx
index cdf7d66367..bfa6805e0b 100644
--- a/webview/src/shared/components/dragDrop/DragDropItemWithTarget.tsx
+++ b/webview/src/shared/components/dragDrop/DragDropItemWithTarget.tsx
@@ -1,23 +1,17 @@
 import React, { PropsWithChildren } from 'react'
 import styles from './styles.module.scss'
-import { DragDropItem, DragDropItemProps } from './DragDropItem'
 
-interface DragDropItemWithTargetProps extends DragDropItemProps {
+interface DragDropItemWithTargetProps {
   dropTarget: JSX.Element | null
+  draggable: JSX.Element
   isAfter?: boolean
+  shouldShowOnDrag?: boolean
 }
 
 export const DragDropItemWithTarget: React.FC<
   PropsWithChildren<DragDropItemWithTargetProps>
-> = ({ dropTarget, isAfter, children, ...props }) => {
-  const { shouldShowOnDrag, draggable } = props
-
-  const itemWithTag = shouldShowOnDrag ? (
-    <DragDropItem key={draggable.key} {...props} isDiv={shouldShowOnDrag} />
-  ) : (
-    children
-  )
-  const block = isAfter ? [itemWithTag, dropTarget] : [dropTarget, itemWithTag]
+> = ({ dropTarget, isAfter, shouldShowOnDrag, draggable, children }) => {
+  const block = isAfter ? [children, dropTarget] : [dropTarget, children]
 
   return shouldShowOnDrag ? (
     <draggable.type className={styles.newBlockWhenShowingOnDrag}>
diff --git a/webview/src/test/dragDrop.ts b/webview/src/test/dragDrop.ts
index cd639e9c02..b4552565e6 100644
--- a/webview/src/test/dragDrop.ts
+++ b/webview/src/test/dragDrop.ts
@@ -109,7 +109,8 @@ export const dragAndDrop = (
   direction: DragEnterDirection = DragEnterDirection.LEFT,
   spyableModule?: SpyableEventCurrentTargetDistances
 ) => {
-  // When showing element on drag, the dragged over element is being recreated to be wrapped in another element, thus the endingNode does not exist as is in the document
+  // When showing element on drag, the dragged over element is being recreated to be wrapped in another element,
+  // thus the endingNode does not exist as is in the document
   const endingNodeId = endingNode.id
   dragEnter(startingNode, endingNodeId, direction, spyableModule)