WP customizer JS API issue

customize-controls.js

/**
 * Custom JavaScript functions for the customizer controls.
 */

;(function (api) {
    api.bind('ready', function () {
        // Create theme options panel.
        api.panel.add(
            new api.Panel('hannover_theme_options', {
                title: 'Theme Options',
            })
        );

        // Add section.
        api.section.add(
            new api.Section('hannover_example_section', {
                title: 'Example Section',
                panel: 'hannover_theme_options',
                customizeAction: 'Customizing ▸ Theme Options'
            })
        );

        // Add checkbox control.
        api.control.add(
            new api.Control('hannover_example_control', {
                setting: 'hannover_example_setting',
                type: 'checkbox',
                section: 'hannover_example_section',
                label: 'Check this box to do something.'
            })
        );
    });
})(wp.customize);

functions.php

/**
 * Enqueue script for custom customize control.
 * File path: wp-content/themes/theme-name/js/customize-controls.js
 */
function custom_customize_enqueue() {
    wp_enqueue_script( 'customize-controls', get_template_directory_uri() . '/js/customize-controls.js', [], null, true);
}
add_action( 'customize_controls_enqueue_scripts', 'custom_customize_enqueue' );