Custom delete events do not work

 <Sortable :list="taskList" class="table-wrapper-web" item-key="id" tag="div" :options="options" @add="addEntry"
            @update="moveEntryWithinList" @remove="removeNestedEntry">
            <template #item="{ element }">
                <div :data-parent-id="parentId" :data-entry-id="element.id" :data-entry-type="element.type" class="drawing-item">

                    <span class="drawing-item-copy" :class="[element.id == select ? 'drawing-row-item' : '']"
                        @click.stop="handleCopyItem(element)">
                        <icon :size="14">
                            <CopyDocument />
                        </icon>
                    </span>

                    <span class="drawing-item-delete" :class="[element.id == select ? 'drawing-row-item' : '']"
                        @click.stop="handleDeleteItem(element)">
                        <icon :size="14">
                            <Delete />
                        </icon>
                    </span>

                </div>
            </template>
        </Sortable>

const options = ref({
    handle: '.drawing-item',
    group: 'desgin',
    animation: 100,
    forceFallback: true,
    fallbackOnBody: true,
    ghostClass: "sortable-ghost"
})

Clicking the delete event inside the item does not respond, but fires the ghost event

Start by reproducing the provided example with the shown options, especially forceFallback and the item-level delete click handler. Trace the wrapper's event handling to determine why the click does not invoke the custom delete event and instead triggers the ghost event. Done means the delete control responds with the expected custom event without triggering the ghost behavior.