How to use slick or owl carousel with in block editor when using server render ?

I created a Gutenberg block which uses slick carousel, i am using $(.element).slick(); to trigger slick with in a script.js file and enqueued both script.js and slick.js in frontend. It works fine on frontend(https://drive.google.com/file/d/1LVFkQnwKCZAifkmqw1LdsI2AxyM-coap/view).

For editor i enqueued the both files(script.js and slick.js) with in “enqueue_block_editor_assets” however in editor it does not work(https://drive.google.com/file/d/1Flpb2_DVGvp_3i19QYPRkHh4-ZeAyYtA/view). Is there any approach to use slick or owl carousel with in editor(when using server render) ?

This is code used for server render function.

if ( ! function_exists( 'my_custom_image_slider' ) ) {
    function my_custom_image_slider( $atts = array() ) {
        ob_start();
        ?>
        <div class="slider slider-single-item">
            <div>
                <img src="https://via.placeholder.com/600?text=1">
            </div>
            <div>
                <img src="https://via.placeholder.com/600?text=2">
            </div>
            <div>
                <img src="https://via.placeholder.com/600?text=3">
            </div>
            <div>
                <img src="https://via.placeholder.com/600?text=4">
            </div>
            <div>
                <img src="https://via.placeholder.com/600?text=5">
            </div>
            <div>
                <img src="https://via.placeholder.com/600?text=6">
            </div>
        </div>
        <?php
        return ob_get_clean();
    }
}

In script.js,

jQuery(document).ready( function($){
    $('.slider-single-item').slick();
} );

Regards