Inside Draggable Item Issue

[ReactJsScc]

class MyPointerSensor extends PointerSensor {
    static activators = [
        {
            eventName: 'onPointerDown',
            handler: ({ nativeEvent: event }) => {
                if (!event.isPrimary || event.button !== 0 || isInteractiveElement(event.target)) {
                    return false;
                }
                return true;
            },
        },
    ];
}

function isInteractiveElement(element) {
    const interactiveElements = ['button', 'input', 'textarea', 'select', 'option'];
    return interactiveElements.includes(element.tagName.toLowerCase());
}

const sensors = useSensors(
    useSensor(MyPointerSensor),
    useSensor(KeyboardSensor)
);

const onDragEnd = ({ active, over }) => {
    if (!over) return;
    if (!editId) return;

    const oldIndex = variantFields.findIndex((item) => item.id === active.id);
    const newIndex = variantFields.findIndex((item) => item.id === over.id);

    if (oldIndex === newIndex) return;

    const updatedVariants = arrayMove(variantFields, oldIndex, newIndex);

    updatedVariants.forEach((item, idx) => {
        item.sequence = idx + 1;
    });

    setVariantFields(updatedVariants);

    variantForm.resetFields();
    updatedVariants.forEach((val, idx) => {
        variantForm.setFieldsValue({
            [`name-${idx}`]: val.name,
            [`mrp-${idx}`]: val.mrp,
            [`sell_price-${idx}`]: val.sell_price,
            [`sku-${idx}`]: val.sku,
        });
    });

    setIstSequenceChange(true);
};

const SortableItem = ({ variant, idx }) => {
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: variant.id });

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        cursor: 'grab',
        userSelect: 'none'
    };

    const addValuesInVariant = (e, idx, field, value) => {
        e.stopPropagation();
        console.log(e);
        const newVariant = [...variantFields];
        newVariant[idx][field] = value;
        setVariantFields(newVariant);
    };

    return (
        <div
            ref={setNodeRef}
            style={style}
            {...attributes}
            {...listeners}
            className={`bg-white shadow-lg rounded-lg p-6 mt-6`}
        >
            <div {...listeners} className="drag-handle">
                <span className="cursor-grab">☰</span>
            </div>
            <Form form={variantForm}>
                <div key={idx}>
                    <div className="flex justify-between items-center">
                        <h3 className="text-[16px] font-normal mb-4">Variant {idx + 1}</h3>
                        <Button
                            type="default"
                            danger
                            onClick={() => deleteVariant(idx)}
                        >
                            Delete
                        </Button>
                    </div>
                    <div>
                        <div className="grid grid-cols-2 gap-4 mb-10">
                            <FormItem
                                name={`name-${idx}`}
                                label="Variant Name"
                                rules={[{ required: true, message: 'Please enter variant name!' }]}
                            >
                                <Input
                                    className="border-gray-300 rounded-lg"
                                    placeholder="Enter Variant Name"
                                    onChange={(e) => addValuesInVariant(e, idx, 'name', e.target.value)}
                                    onFocus={(e) => {
                                        console.log(e);
                                    }}
                                    onFocusCapture={(e) => {
                                        console.log(e);
                                    }}
                                    // autoFocus // Automatically focus when new variant is added
                                />
                            </FormItem>
                            <FormItem
                                name={`mrp-${idx}`}
                                label="Variant MRP"
                                rules={[{ required: true, message: 'Please enter variant MRP!' }]}
                            >
                                <Input
                                    className="border-gray-300 rounded-lg"
                                    placeholder="Enter Variant MRP"
                                    onChange={(e) => addValuesInVariant(e, idx, 'mrp', e.target.value)}
                                />
                            </FormItem>
                        </div>
                        <div className="grid grid-cols-2 gap-4 mb-5">
                            <FormItem
                                name={`sell_price-${idx}`}
                                label="Variant Sell Price"
                                rules={[{ required: true, message: 'Please enter variant sell price!' }]}
                            >
                                <Input
                                    className="border-gray-300 rounded-lg"
                                    placeholder="Enter Variant Sell Price"
                                    onChange={(e) => addValuesInVariant(e, idx, 'sell_price', e.target.value)}
                                />
                            </FormItem>
                            <FormItem
                                name={`sku-${idx}`}
                                label="Variant SKU"
                                rules={[{ required: true, message: 'Please enter variant SKU!' }]}
                            >
                                <Input
                                    className="border-gray-300 rounded-lg"
                                    placeholder="Enter Variant SKU"
                                    onChange={(e) => addValuesInVariant(e, idx, 'sku', e.target.value)}
                                />
                            </FormItem>
                        </div>
                    </div>
                </div>
            </Form>
        </div>
    );
};

<DndContext
    sensors={sensors}
    collisionDetection={closestCenter}
    onDragEnd={onDragEnd}
>
    <SortableContext
        items={variantFields.map((item) => item.id)}
        strategy={verticalListSortingStrategy}
        disableTransforms
    >
        {variantFields.map((variant, idx) => (
            <SortableItem key={variant.id} variant={variant} idx={idx} />
        ))}
    </SortableContext>
</DndContext>