Getting the values from a JSON

Question

each entry in the JSON, looks like this:

{
  "ALBA": [
    {
      "name": "ABRUD",
      "zip": "515100",
      "lat": "46.274675",
      "long": "23.065029"
    },
    {
      "name": "ABRUD-SAT",
      "zip": "515101",
      "lat": "46.283967",
      "long": "23.061093"
    },
}

The first object is the county name, I have more of them, but I just gave an example, the nested objects are the cities. What I want is a way to display them in a select tag in HTML, but I can't manage to do it.

I have the following code, until now:

const getCities = () => {
    // Object.keys(regions).map(function(key, index) {
    //   console.log(regions[key]);
    // })
    for (const region in regions) {
      console.log(region); //this returns exactly what i want
    //cities.push(region)
    }
  }
  getCities();

And in html:

<div>
            <select name="city">
              <option value={cities}>{cities}</option>
            </select>
</div>

How can I make this select tag return me exactly the counties and how to make another one to show me the cities name based on the selected county?

EDIT: I managed to do it doing the following:

const getCities = () => {
    for (const region in regions) {
      cities.push(region);
    }
    return cities
  }
  getCities();


<div>
        <label htmlFor="city">County</label>
        <select name="city"
        onChange={(e) => setCity(e.target.value)}
        >
          {cities.map((city) => {
            return (
              <option value={city} key={city}>{city}</option>
            )
          })}
        </select>
      </div>