Error when try to set responsive breakpoints

When I attempt to set responsive breakpoints for the carousel and adjust the number of slides, the block renders an “unexpected or invalid content” error in the editor.

The code:

<!-- wp:cloudcatch/splide-carousel {"perPage":2,"breakpointTablet":"781","perPageTablet":1,"perPageMobile":1} -->
<div class="wp-block-cloudcatch-splide-carousel wp-block-splide-carousel__container"><figure class="wp-block-splide-carousel splide" data-splide="{&quot;type&quot;:&quot;slide&quot;,&quot;perPage&quot;:2,&quot;speed&quot;:400,&quot;gap&quot;:&quot;0px&quot;,&quot;fixedWidth&quot;:&quot;&quot;,&quot;autoWidth&quot;:false,&quot;perMove&quot;:1,&quot;direction&quot;:&quot;ltr&quot;,&quot;fixedHeight&quot;:&quot;&quot;,&quot;height&quot;:&quot;&quot;,&quot;arrows&quot;:true,&quot;pagination&quot;:true,&quot;autoplay&quot;:false,&quot;interval&quot;:&quot;5000&quot;,&quot;pauseOnHover&quot;:true,&quot;mediaQuery&quot;:&quot;max&quot;,&quot;breakpoints&quot;:{&quot;599&quot;:{&quot;perPage&quot;:1},&quot;781&quot;:{&quot;perPage&quot;:1}}}" data-splide-extensions="{&quot;autoScroll&quot;:false,&quot;urlHash&quot;:false,&quot;grid&quot;:false}"><div class="wp-block-splide-carousel__track splide__track"><div class="wp-block-splide-carousel__list splide__list"><!-- wp:cloudcatch/splide-carousel-item -->
<div class="wp-block-cloudcatch-splide-carousel-item wp-block-splide-carousel__slide splide__slide"><!-- wp:paragraph -->
<p>Slide 1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:cloudcatch/splide-carousel-item -->

<!-- wp:cloudcatch/splide-carousel-item -->
<div class="wp-block-cloudcatch-splide-carousel-item wp-block-splide-carousel__slide splide__slide"><!-- wp:paragraph -->
<p>Slide 2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:cloudcatch/splide-carousel-item --></div></div></figure></div>
<!-- /wp:cloudcatch/splide-carousel -->