Node getting removed on drag and drop

1 
import { mergeAttributes, Node } from '@tiptap/core'
import { ReactNodeViewRenderer } from '@tiptap/react'
import VariableNode from './VariableNode'
import {updateAllNodesAttributesByCondition} from "./commands/updateAllNodesAttributesByCondition";
import Popover from "./Popover";
import {updateVariableSelectOptions} from "./commands/updateVariablesSelectOptions";

export const variableExName = 'variable-extension';
export const enum OptionType {
    STRING,
    NUMBER,
    DATE
}

export type VariableExtensionConfig = {
    popoverComponent?: any,
    options?: VariableOption[]
}

export type VariableOption = {
    key: string,
    type: OptionType,
    label: string,
    default?: any
}

export default (config?: VariableExtensionConfig)=> {
    const defaultConfig: VariableExtensionConfig = {
        popoverComponent: Popover
    };

    const mergedConfig = {...defaultConfig, ...config};

    return Node.create({
        name: variableExName,

        draggable: true,

        content: 'inline*',

        group: 'inline',

        inline: true,

        atom: true,

        ...mergedConfig,

        addCommands() {
            return {
                updateAllNodesAttributesByCondition,
                updateVariableSelectOptions
            }
        },
        addAttributes() {
            return {
                viewMode: {
                    default: 'editMode'
                },
                selected: null,
                options: {
                    default: mergedConfig?.options || []
                }
            }
        },

        parseHTML() {
            return [
                {
                    tag: 'react-component',
                },
            ]
        },

        renderHTML(props) {
            return ['react-component', mergeAttributes(props.HTMLAttributes)]
        },

        addNodeView() {
            const _this = this;
            return ReactNodeViewRenderer(VariableNode, {
                stopEvent({event}: {event: Event}) {
                    const { draggable } = _this.type.spec;
                    if (/dragstart|dragover|drangend|drop/.test(event.type)) return false
                    return !(draggable && /mousedown|drag|drop/.test(event.type))
                },

                ignoreMutation() { return true; }
            })
        },
    })
}

example

I have created the following custom node view. However, I am encountering an issue when dragging and dropping the chip onto another chip. Instead of positioning the dragged chip after the drop target, it gets removed from the DOM entirely. Interestingly, I noticed that the Dino example is working properly. What did I miss?