how to create city state country dropdown UIComponent in magento 2 admin form

app/code/Ktpl/Timeslot/view/adminhtml/ui_component/ktpl_timeslot_timeslot_form.xml

<?xml version="1.0" ?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="provider" xsi:type="string">ktpl_timeslot_timeslot_form.timeslot_form_data_source</item> </item> <item name="label" translate="true" xsi:type="string">General Information</item> <item name="template" xsi:type="string">templates/form/collapsible</item> </argument> <settings> <buttons> <button class="Ktpl\Timeslot\Block\Adminhtml\Timeslot\Edit\BackButton" name="back"/> <button class="Ktpl\Timeslot\Block\Adminhtml\Timeslot\Edit\DeleteButton" name="delete"/> <button class="Ktpl\Timeslot\Block\Adminhtml\Timeslot\Edit\SaveButton" name="save"/> <button class="Ktpl\Timeslot\Block\Adminhtml\Timeslot\Edit\SaveAndContinueButton" name="save_and_continue"/> </buttons> <namespace>ktpl_timeslot_timeslot_form</namespace> <dataScope>data</dataScope> <deps> <dep>ktpl_timeslot_timeslot_form.timeslot_form_data_source</dep> </deps> </settings> <dataSource name="timeslot_form_data_source"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item> </item> </argument> <settings> <submitUrl path="*/*/save"/> </settings> <dataProvider class="Ktpl\Timeslot\Model\Timeslot\DataProvider" name="timeslot_form_data_source"> <settings> <requestFieldName>timeslot_id</requestFieldName> <primaryFieldName>timeslot_id</primaryFieldName> </settings> </dataProvider> </dataSource> <fieldset name="general"> <settings> <label/> </settings> <field name="country_id"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="object">Magento\Directory\Model\Config\Source\Country</item> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Country</item> <item name="formElement" xsi:type="string">select</item> <item name="source" xsi:type="string">Timeslot</item> <item name="component" xsi:type="string">Magento_Ui/js/form/element/country</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> </argument> </field> <field name="region"> <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">State/Region</item> <item name="formElement" xsi:type="string">input</item> <item name="source" xsi:type="string">Timeslot</item> <item name="sortOrder" xsi:type="number">15</item> <item name="visible" xsi:type="boolean">false</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> </item> </argument> </field> <field name="state_id"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="object">Magento\Directory\Model\ResourceModel\Region\Collection</item> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">State/Region</item> <item name="formElement" xsi:type="string">select</item> <item name="source" xsi:type="string">Timeslot</item> <item name="sortOrder" xsi:type="number">20</item> <item name="customEntry" xsi:type="string">region</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="boolean">true</item> </item> <item name="filterBy" xsi:type="array"> <item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.country_id</item> <item name="field" xsi:type="string">country_id</item> </item> </item> </argument> </field> <field formElement="input" name="city_id" sortOrder="30"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="source" xsi:type="string">Timeslot</item> </item> </argument> <settings> <dataType>text</dataType> <label translate="true">City</label> <dataScope>city_id</dataScope> <validation> <rule name="required-entry" xsi:type="boolean">true</rule> </validation> </settings> </field> </fieldset> </form>