JSFiddle - React, Tailwind, and code Playground

HTML

<select id="country"></select>
	<select id="city"></select>

JavaScript

let data = [
		{id: '1', label: 'ru', country: 'Россия', citys: [
			{id: '1-1', city: 'Москва'},
			{id: '1-2', city: 'Санк-Петербург'},
			{id: '1-3', city: 'Сочи'},
			{id: '1-4', city: 'Анапа'}
		]},
		{id: '2', label: 'by', country: 'Беларусь', citys: [
			{id: '2-1', city: 'Минск'},
			{id: '2-2', city: 'Гомель'},
			{id: '2-3', city: 'Витебск'}
		]},
		{id: '3', label: 'uk', country: 'Украина', citys: [
			{id: '3-1', city: 'Киев'},
			{id: '3-2', city: 'Львов'},
			{id: '3-3', city: 'Одеса'}
		]}
	];


	let a = [{baseCountry: data}];

	a.forEach(function(entry) {
	    console.log(entry);
	});

	const
	  countryEl = document.querySelector('#country'),
	  cityEl = document.querySelector('#city');

		countryEl.innerHTML = data.map(n => `<option value="${n.id}">${n.country}</option>`).join('');

		countryEl.addEventListener('change', function() {
		  cityEl.innerHTML = data
		    .find(n => n.id === this.value)
		    .cities
		    .map(n => `<option value="${n.id}">${n.city}</option>`)
		    .join('');
		});

	countryEl.dispatchEvent(new Event('change'));