Высвечиваться ul > li

Есть три файла: json country, region city. При нажатии на регион должен city высвечиваться в ul > li.

import React, { Component } from 'react';
import './App.css';
import CITIES from './data/cities_light.json'
import COUNTRIES from './data/countries.json'
import REGIONS from './data/regions.json'


class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            cities: CITIES[2].data,
            regions: REGIONS[2].data,
            countries: COUNTRIES[2].data,
            currentCountry: 0,
            currentRegion: 0
        }
    }

    cCountry = (ev) => {
        this.setState({currentCountry: ev.target.value, currentRegion: 0})
    }

    cRegion = (ev) => {
        this.setState({currentRegion: ev.target.value})
    }



    render() {
        const {
            cities, regions, countries, currentCountry, currentRegion} = this.state
        return (
            <div>
                <select name="countries" id="countries" onChange={this.cCountry}>
                    {
                        countries.map(c => (
                            <option key={c.id} value={c.id}>{c.name}</option>
                        ))
                    }
                </select>
                <>
                    <select name="regions" id="regions" onChange={this.cRegion}>
                        {
                            regions.filter(c => (
                                +c.country_id === +currentCountry
                            )).map(c => (
                                <option key={c.id} value={c.id}>{c.name}</option>
                            ))
                        }
                    </select>
                </>

            </div>
        );
    }
}

export default App;