Drag and drop does not work with web components

Question

I am using Web Components within my Drupal 10 blocks. For simplicity (my block and web component are more complicated), let's say I have a block type of Image with CTA. In my custom theme, I include the twig template for this block and I am making sure that I include the proper classes needed for the layout builder functionality:

{%
set classes = [
    'block',
    'block-' ~ configuration.provider|clean_class,
    'block-' ~ plugin_id|clean_class,
    layout ? 'layout--' ~ layout|clean_class,
]
<div{{attributes.addClass(classes)}}>
   {{ title_prefix }}
   {% if label %}
       <h2{{title_attributes.addClass('block__title')}}>{{ label }}</h2>
   {% endif %}
   {{ title_suffix }}
   {% block content %}
      <div{{content_attributes.addClass('block__content')}}>
        <image-cta img-src="{{image_src}}" cta-url="{{cta_url}}"></image-cta>
      </div>
   {% endblock %}
</div>
%}

and here is my simple image-cta.tsx web component that I created using stenciljs:

import { Component, Host, h, Prop } from '@stencil/core';


@Component({
    tag: 'image-cta',
    shadow: false,
})

export class ImageCta {

    @Prop() imgSrc: string;
    @Prop() ctaUrl: string = '/';

    render() {
        return (
            <Host>
                <div>
                    <img src={this.imgSrc} alt="alt" />
                    <a href={this.ctaUrl} >Let's go</a>
                </div>
            </Host>
        );
    }

}

The problem is that when I try to drag this block in the layout builder, it throws an error

Uncaught TypeError: Cannot read properties of undefined (reading 'nodeType')

I have traced it back to possibly the clone function in jQuery UI and SortableJS library that is used there. Is there any way to fix this? Setting shadow to true inside the component seems to fix the issue but that would cause other problems in my application.