Error: can't access property "relativeX", t.dragEvent() is null

[MrLolok]

I receive the following error: Error: can't access property "relativeX", t.dragEvent() is null when swapMode is set to "hover". It seems that the dragged element gets stuck when trying to swap with another element via hover

"use client";

import type { Swapy } from "swapy";
import type { SwappableGridProps, SwapyEvent } from "./types";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createSwapy, utils } from "swapy";

import { cn } from "../../utils/cn";

const SwappableGrid = <T,>({ items, keyAttribute, onReorder, renderItem, className }: SwappableGridProps<T>) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const swapyRef = useRef<Swapy | null>(null);

    const [slotItemMap, setSlotItemMap] = useState(utils.initSlotItemMap(items, keyAttribute));
    const slottedItems = useMemo(
        () => utils.toSlottedItems(items, keyAttribute, slotItemMap),
        [items, keyAttribute, slotItemMap],
    );

    const handleSwap = useCallback(
        (event: SwapyEvent) => {
            const newMap = event.newSlotItemMap.asArray;
            setSlotItemMap(newMap);

            const reorderedItems = utils
                .toSlottedItems(items, keyAttribute, newMap)
                .map(({ item }) => item)
                .filter((item): item is T => item !== null);

            onReorder(reorderedItems);
        },
        [items, keyAttribute, onReorder],
    );

    useEffect(() => {
        const containerElement = containerRef.current;
        if (containerElement) {
            swapyRef.current = createSwapy(containerElement, {
                swapMode: "hover",
                manualSwap: true,
            });
            swapyRef.current.onSwap(handleSwap);
        }

        return () => {
            swapyRef.current?.destroy();
        };
    }, [handleSwap]);

    useEffect(() => {
        utils.dynamicSwapy(swapyRef.current, items, keyAttribute, slotItemMap, setSlotItemMap);
    }, [items, keyAttribute]);

    return (
        <div ref={containerRef} className={cn("container", className)}>
            {slottedItems.map(({ slotId, itemId, item }) => {
                if (!item) return null;
                return (
                    <div key={slotId} data-swapy-slot={slotId} className="aspect-square">
                        <div
                            key={itemId}
                            data-swapy-item={itemId}
                            className="h-full w-full cursor-grab active:cursor-grabbing"
                        >
                            {renderItem(item)}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

SwappableGrid.displayName = "SwappableGrid";
export default SwappableGrid;