mb_blocks_preview not working

This is the script.

(function() {
    function initCarousel() {
        // หา elements ทั้งหมดที่มี class 'hero-carousel-with-thumbnail-navigation'
        const carousels = document.querySelectorAll('.hero-carousel-with-thumbnail-navigation');

        carousels.forEach(carousel => {
            // สร้าง Splide สำหรับ thumbnail navigation
            const thumbnailNav = new Splide(carousel.querySelector('.thumbnail-navigation'), {
                fixedWidth: 100,
                fixedHeight: 60,
                gap: 10,
                rewind: true,
                pagination: false,
                isNavigation: true,
                breakpoints: {
                    600: {
                        fixedWidth: 60,
                        fixedHeight: 44,
                    },
                },
            }).mount();

            // สร้าง Splide สำหรับ hero carousel
            const heroCarousel = new Splide(carousel.querySelector('.hero-carousel'), {
                type: 'fade',
                perPage: 1,
                rewind: true,
                pagination: false,
                arrows: false,
            });

            // เชื่อมต่อ hero carousel กับ thumbnail navigation
            heroCarousel.sync(thumbnailNav).mount();
        });
    }

    // ทำงานเมื่อเอกสารโหลดเสร็จในหน้าเว็บ
    document.addEventListener('DOMContentLoaded', initCarousel);

	document.addEventListener('mb_blocks_preview', initCarousel);
})();

This is my php.

<?php
class CAAT_Block_Plugin {
	public function __construct() {
		add_action( 'enqueue_block_assets', array( $this, 'register_scripts' ) );
		add_filter( 'rwmb_meta_boxes', array( $this, 'register_hero_carousel_with_thumbnail_navigation_block' ) );
	}

	public function register_scripts() {
		wp_register_style( 'splide', CAAT_BLOCK_PLUGIN_URL . 'assets/splide/dist/css/splide.min.css', array(), '4.1.2', 'all' );
		wp_register_script( 'splide', CAAT_BLOCK_PLUGIN_URL . 'assets/splide/dist/js/splide.min.js', array(), '4.1.2', true );
	}

	public function register_hero_carousel_with_thumbnail_navigation_block( $meta_boxes ) {
		$prefix = 'hero_carousel_';

		$meta_boxes[] = array(
			'title'           => __( 'Hero Carousel with Thumbnail Navigation', 'caat' ),
			'id'              => 'hero-carousel-with-thumbnail-navigation',
			'version'         => '1.0.1',
			'category'        => 'meta-box',
			'keywords'        => array( 'carousel', 'slideshow' ),
			'supports'        => array(
				'align'           => array( 'wide', 'full' ),
				'customClassName' => true,
			),
			'render_template' => CAAT_BLOCK_PLUGIN_PATH . 'blocks/hero-carousel-with-thumbnail-navigation/render.php',
			'enqueue_style'   => CAAT_BLOCK_PLUGIN_URL . 'blocks/hero-carousel-with-thumbnail-navigation/hero-carousel.css',
			'enqueue_script'  => CAAT_BLOCK_PLUGIN_URL . 'blocks/hero-carousel-with-thumbnail-navigation/hero-carousel.js',
			'enqueue_assets'  => function () {
				wp_enqueue_script( 'splide' );
				wp_enqueue_style( 'splide' );
			},
			'type'            => 'block',
			'context'         => 'side',
			'fields'          => array(
				array(
					'name'     => __( 'Gallery', 'caat' ),
					'id'       => $prefix . 'gallery',
					'type'     => 'image_advanced',
					'required' => true,
				),
			),
		);

		return $meta_boxes;
	}
}
new CAAT_Block_Plugin();

I tried many times and finding from forum and your docs.

Did I do something wrong?