How do I get billing_state to affect billing_city’s values in Woocommerce?

I am trying to have each of the states represent a collection of cities, when an option is selected(in the billing_state field), it should display values in a billing_city drop down menu for that selected state.

I am also trying to make the billing_city field have a search bar with Select2, but I can’t get it work, I’ve tried many “Solutions”, It appears as a normal select drop down menu, without the search bar.

The solution I tried was posted on Change WooCommerce checkout city field to a dropdown for a unique country
Since I wanted to change it for the billing_state not billing_country, I’ve modified the code, but I don’t get the expected result and I am struggling to figure out why.
Here is the code:

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_select_fields' );
function add_custom_checkout_select_fields( $fields ) {
    // Define HERE in the array, your desired cities
    $cities = array(
        __('Abrud','woocommerce'),
        __('Adjud','woocommerce'),
        __('Agnita','woocommerce'),
        __('Aiud','woocommerce'),
        __('Alba_Iulia','woocommerce'),
        __('Alesd','woocommerce'),
        __('Alexandria','woocommerce'),
        __('Amara','woocommerce'),
        __('Anina','woocommerce'),
        __('Aninoasa','woocommerce'),
        
    );

  

    // Adding 2 custom select fields
    $fields['billing']['billing_state2'] = $fields['shipping']['shipping_state2'] = array(
        'type'         => 'select',
        'required'     => true,
        'options'      => $options,
        'autocomplete' => 'address-level1',
    );
    
    // Copying data from WooCommerce city fields
    $fields['billing']['billing_city2']['class'] = array_merge($fields['billing']['billing_city']['class'], array('hidden') );
    $fields['shipping']['shipping_city2']['class'] = array_merge($fields['shipping']['shipping_city']['class'], array('hidden') );
    $fields['billing']['billing_city2']['label'] = $fields['billing']['billing_city']['label'];
    $fields['shipping']['shipping_city2']['label'] = $fields['shipping']['shipping_city']['label'];
    $fields['billing']['billing_city2']['priority'] = $fields['billing']['billing_city']['priority'] + 5;
    $fields['shipping']['shipping_city2']['priority'] = $fields['shipping']['shipping_city']['priority'] + 5;

    return $fields;
}

// Custom inline styles to hide some checkout fields
add_action( 'wp_head', 'custom_checkout_css' );
function custom_checkout_css() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ) {
        ?><style>
        #billing_city_field.hidden, #billing_city2_field.hidden,
        #shipping_city_field.hidden, #shipping_city2_field.hidden
        {display:none !important;}
        </style><?php
    }
}

// Custom jQuery code
add_action( 'wp_footer', 'custom_checkout_js_script' );
function custom_checkout_js_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):
    ?>
    <script type="text/javascript">
    (function($){
        var targetedState = 'Alba',
            initialBState = '<?php echo WC()->customer->get_billing_state(); ?>',
            initialSState = '<?php echo WC()->customer->get_shipping_state(); ?>';

        function showHideFields( country, fieldset ) {
            var select2Classes = 'country_select select2-hidden-accessible';

            if( country === targetedState ) {
                $('#'+fieldset+'_city2_field').removeClass('hidden');
                $('#'+fieldset+'_city_field').addClass('hidden');
                $('select#'+fieldset+'_city2').addClass(select2Classes);
            } else if( country !== targetedState && $('#'+fieldset+'_city_field').hasClass('hidden') ) {
                $('#'+fieldset+'_city2_field').addClass('hidden');
                $('#'+fieldset+'_city_field').removeClass('hidden');
                $('select#'+fieldset+'_city2').removeClass(select2Classes);
            }
        }

        // 1. On Start (after Checkout is loaded)
        showHideFields(initialBState, 'billing');
        showHideFields(initialSState, 'shipping');

        // 2. Live: On State change event
        $('body').on( 'change', 'select#billing_state', function(){
            showHideFields($(this).val(), 'billing');
        });
        $('body').on( 'change', 'select#shipping_state', function(){
            showHideFields($(this).val(), 'shipping');
        });

        // 3. Live: On City change event for "Alba" state
        $('body').on( 'change', 'select#billing_city', function(){
             $('input#billing_city').val($(this).val());
        });
        $('body').on( 'change', 'select#shipping_city', function(){
             $('input#shipping_city').val($(this).val());
        });
    })(jQuery);
    </script>
    <?php
    endif;
}

So for example if I choose “Alba” in the billing_state drop down field, there should only be the first 3 cities popping up in billing_city drop down field. (Abrud, Adjud, Agnita)

All of the changes I am making are in the functions.php located in Theme File Editor.