always get this error

[jjhesk]

frontend TypeError: n.el().parentElement is null

import { createSwapy, SlotItemMapArray, Swapy, utils } from 'swapy'
import { useEffect, useMemo, useRef, useState } from 'react'
import { OrderSub, useStore } from '@/lib/types'


type Item = {
    id: string
    title: string
    data: OrderSub
}

const initialItems: Item[] = []

let id = 4


export function ContainerABTester() {
    const {
        useProtocol,
        running,
        config
    } = useStore()
    const [items, setItems] = useState<Item[]>(initialItems)
    const [slotItemMap, setSlotItemMap] = useState<SlotItemMapArray>(utils.initSlotItemMap(items, 'id'))
    const slottedItems = useMemo(() => utils.toSlottedItems(items, 'id', slotItemMap), [items, slotItemMap])
    const swapyRef = useRef<Swapy | null>(null)

    const containerRef = useRef<HTMLDivElement>(null)

    useEffect(() => utils.dynamicSwapy(swapyRef.current, items, 'id', slotItemMap, setSlotItemMap), [items])

    useEffect(() => {
        swapyRef.current = createSwapy(containerRef.current!, {
            manualSwap: true,
            // animation: 'dynamic'
            autoScrollOnDrag: true,
            // swapMode: 'drop',
            // enabled: true,
            // dragAxis: 'x',
            // dragOnHold: true
        })

        swapyRef.current.onSwap((event) => {
            setSlotItemMap(event.newSlotItemMap.asArray)
        })

        return () => {
            swapyRef.current?.destroy()
        }
    }, [])
    function makeOrderSample(): OrderSub {
        return {
            id: '',
            user_id: config.sampleUserId,
            price: config.basePrice,
            quantity: config.baseQuantity,
            side: "buy",
            type: "limit",
            category: config.position.category,
            market_id: config.marketId,
            take_profit: config.position.takeProfit,
            stop_loss: config.position.stopLoss,
            leverage: config.position.leverage | 10,
            gridEnabled: false
        }
    }

    return (
        <div>
            <div className="swappy_container" ref={containerRef}>
                <div className="items">
                    {slottedItems.map(({ slotId, itemId, item }) => (
                        <div className="slot" key={slotId} data-swapy-slot={slotId}>
                            {item &&
                                <div className="item" data-swapy-item={itemId} key={itemId}>
                                    <span className="title_c">#{item.title}</span>
                                    <span className="delete" data-swapy-no-drag onClick={() => {
                                        setItems(items.filter(i => i.id !== item.id))
                                    }}></span>
                                </div>
                            }
                        </div>
                    ))}
                </div>
            </div>

            <div className="swp_control">

                <button className="item" onClick={() => {
                    const newItem: Item = {
                        id: `${id}`,
                        title: `${id}`,
                        data: makeOrderSample()

                    }
                    setItems([...items, newItem])
                    id++
                }}>append order</button>

                <button className="item item--add" onClick={() => {

                }}>exec array [...]</button>
            </div>

        </div>
    )
}

[jjhesk]

it trigggers when the drag function is released on the slot and not the dragable div...