I am getting this weird glitch, while working with dnd-kit. I have an implementation of dnd-kit to handle drag and drop feature for column list.

whats working:

1. Feature itself is working. drag and drop
2. saving of the updated list.

The glitch:
Once drag and drop is working fine. Second time the item dragged initially is swapping to its original position, if it is overlapped. This is happening with multiple items in the list as well.

I have tried to fix by passing transition (animation style), checked keys but nothing working.

Also tried library version:
“@dnd-kit/core”: “^6.0.8”,
“@dnd-kit/sortable”: “^7.0.2”,
“@dnd-kit/utilities”: “^3.2.1”,

export const SortableItem = ({ children, id, styles, dragStyles }) => {
    const { setNodeRef, attributes, listeners, transition, transform, isDragging } = useSortable({
        id
    });

    const style = {
        transition,
        transform: CSS.Translate.toString(transform),
        opacity: isDragging ? 0.7 : 1,
        zIndex: isDragging ? 1 : 0
    };

    return (
        <SortableItemWrapper key={id} ref={setNodeRef} style={style} customStyles={styles}>
            <DragAct {...listeners} {...attributes} styles={dragStyles} isDragging={isDragging}>
                <Drag />
            </DragAct>
            <SortableChildren>{children}</SortableChildren>
        </SortableItemWrapper>
    );
};

const SortItems = ({ itemsKeys, state, setState, uniqueKey }) => {
    return (
    <div>
        {state?.length > 0 ? (
            <Sortable
                items={itemsKeys}
                sortItems={state}
                setSortItems={setState}
                uniqueKey={uniqueKey}
            >
                {state?.map(column => {
                    const columnKey = getColumnKey(column);
                    return column ? (
                        <SortableItem
                            key={columnKey}
                            id={columnKey}
                            styles={sortableItemStyles}
                            dragStyles={dragStyles}
                        >
                            <ColumnItem id={columnKey} column={column} getColumnKey={getColumnKey}></ColumnItem>
                        </SortableItem>
                    ) : (
                        <></> 
                    );
                })}
            </Sortable>
        ) : (
            <p>
                <i>No results found</i>
            </p>
        )}
    </div>
);
}