Magento 2.4.6: How to display Order IDs Based on Selected Customers in a UI Form?

I’ve created a UI component form that consists of two dropdown fields. The first dropdown successfully displays customer IDs and names. However, I’m encountering challenges with the second dropdown, which is intended to show order IDs related to the selected customer. Despite my attempts to use JavaScript components, I’m not able to get the desired outcome. Could you provide guidance on how to implement this feature effectively?

Below are the ui component fields:

<field name="dropdown1">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">VendorModuleModelConfigSourceOptions</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Dropdown 1</item>
            <item name="component" xsi:type="string">Vendor_Module/js/form/element/options</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">number</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">module</item>
            <item name="dataScope" xsi:type="string">dropdown1</item>
            <item name="sortOrder" xsi:type="number">100</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>
<field name="dropdown2">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Dropdown 2</item>
            <item name="dataType" xsi:type="string">number</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">module</item>
            <item name="sortOrder" xsi:type="number">110</item>
            <item name="dataScope" xsi:type="string">dropdown2</item>
            <item name="visible" xsi:type="boolean">false</item>
        </item>
    </argument>
</field>

Below is my javascript file:

define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'jquery'
], function (_, uiRegistry, select, $) {
    'use strict';

    return select.extend({

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            console.log(value);
            var field2 = uiRegistry.get('index = dropdown2');
            if (field2) {
                var selectElement = field2.selectNode;
                $(selectElement).empty(); // Clear previous options

                // Make an AJAX request to fetch orders for the specific customer
                $.ajax({
                    url: '/admin/module/index/orders',
                    type: 'GET',
                    data: { customer_id: value, form_key: window.FORM_KEY },
                    dataType: 'json',
                    success: function (response) {
                        console.log(response);
                        if (response.orders) {
                            response.orders.forEach(function (order) {
                                var option = document.createElement('option');
                                option.value = order.entity_id;
                                option.text = order.increment_id;
                                selectElement.appendChild(option);
                            });
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('AJAX request error:', error);
                    }
                });
            }
            
            return this._super();
        },
    });
});

Please help.