Update selector field in Magento 2

I have a form with the following 2 fields in an xml file:
Regions:

<field formElement="select" name="regions" >
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Regions</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Vendor_MyModule/js/form/element/ui-select</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">regions</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="listens" xsi:type="array">
                <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
            </item>
        </item>
    </argument>
</field>

Cities:

<field formElement="select" name="cities">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Cities</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">cities</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="listens" xsi:type="array">
                <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
            </item>
        </item>
    </argument>
</field>

I display the form on the admin page.

In the Regions form I bring a list of certain regions, for example I have Region 1 and Region 2. Region 1 has 20 cities and Region 2 has 30 cities.
If I select Region 1, I want the 2nd field (Cities) to display the list of 20 cities. If I select both regions, I want it to bring me the list of all the cities in both regions.

ui-select.js

`doAjax: function () {
return $.ajax({

showLoader: true,
cache: false,
url: window.location.origin + "/admin/myroute/ajax/city",
method: "POST",
data: {
    regions: this.value(),
    form_key: FORM_KEY,
},
dataType: "json",

success: function (data) {
    let cityFields = $('select[name="cities"]');

    cityFields.empty();

    if (data.length) {
        for (let i = 0; i < data.length; i++) {
            for (let key in data[i]) {
                let optionFieldDOM = document.createElement('option');
                optionFieldDOM.text = data[i][key]['label'];
                optionFieldDOM.value = data[i][key]['value'];
                cityFields.append(optionFieldDOM);
            }
        }
    }
},`

Here, after selecting for example Region 1, given that it contains the following:

**success: function (data)**
**console.log(data):**
**0: Array(20)**
   1: {value: '1', label: 'Region1 - City1'}
   2: {value: '2', label: 'Region1 - City2'}
   3: {value: '3', label: 'Region1 - City3'}
   .
   .
   .
   20: {value: '20', label: 'City2'}`

Here I entered the console to see what their value is when taking each city separately:

Console DevTools:

**data[i][key]['label']**
Region1 - City1'
**data[i][key]['value']**
'1'
**console.log(optionFieldDOM)**
<option value="1">Region1 - City1</option>

In the City.php controller where I get the list of cities, I return a json:
City.php

public function execute()
{
if ($this->getRequest()->isAjax() && $this->getRequest()->isPost()) {

$regionIds = $this->getRequest()->getParam('regions');

if (isset($regionIds) && (int)$regionIds > 0) {

    $arrayOfCitiesByRegionIds = [];
    foreach ($regionIds as $regionId){
        $arrayOfCitiesByRegionIds [] = $this->cityModel->getCities((int)$regionId);
    }

    return $this->jsonResponse($arrayOfCitiesByRegionIds);
   }
   return $this->jsonResponse([]);
}

return $this->_redirect(“//”);
}

After I select a region, it doesn’t show me anything in the Cities field, it remains empty. From what I can see, it brings me the list of cities, and appends them. But I don’t understand how I can display them in the Cities field.

It brings me the list of cities for the respective region, everything is fine, but it doesn’t display it in the field. I think the problem is with the display in the Cities field, because from what you can see, the data is correctly brought to success in that Ajax.
I am waiting for your answers and it would help me a lot if you could help me. Thank you

I tried to add the options for the field with jquery.