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

"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;