The wp.customize object is not working for me

Question

I used to add Customizer Panel, Section and Controles using the classic PHP Method, but, then I found Weston Ruter's post and found that the PHP method is just a wraper for wp.customize JavaScript object.

The post -> https://make.wordpress.org/core/2017/11/01/improvements-to-the-customize-js-api-in-4-9/.

I'm trying to create new panel, section and control using the wp.customize control on my custom theme, but IDK why I can't see any changes in the customizer.

In functions.php

function customize_preview_js() {
    wp_enqueue_script( 'agilitywp-customizer', THEME_DIR . 'js/customizer-preview.js', array( 'customize-preview' ), VERSION, true );
}
add_action( 'customize_preview_init', 'customize_preview_js' );

In customizer-preview.js:

wp.customize.bind( 'ready', function() {
    // Add a custom panel
    wp.customize.panel.add( 'my_panel', {
      title: 'My Panel',
      priority: 10,
    } );

    // Add a custom section
    wp.customize.section.add( 'my_section', {
      title: 'My Section',
      panel: 'my_panel',
      priority: 10,
    } );

    // Add a custom control
    const control = new wp.customize.Control( 'my_control', {
      type: 'text',
      label: 'My Control',
      section: 'my_section',
      settings: {
            default: 'my_setting',
      },
    } );
    wp.customize.add( control );
} );

I'm not sure if I' doing something wrong or I understand the Weston's post wrong. I'd appreciate all your help and discussion.

Thank you!