data showing in single option instead of multiple option from json array

I have a JSON array in a JSON file looks like this:

{
"states": [
    {
        "state": "Andhra Pradesh",
        "districts": [
            "Anantapur",
            "Chittoor",
            "East Godavari",
            "Guntur",
            "Krishna",
            "Kurnool",
            "Nellore",
            "Prakasam",
            "Srikakulam",
            "Visakhapatnam",
            "Vizianagaram",
            "West Godavari",
            "YSR Kadapa"]
        
        }
    ]
}

and I am successfully able to load all states in the select element as a dependent select option
. when I select a state from a select element it populates a related array in the district select element.
but instead of the array showing a separate option it shows as one option:

Should I modify my JSON array in a different format?

jquery

$('#statePicker').on('change', function() {            
        $("#cityPicker").html('');
        $.ajax({
            url: "{{ asset('json/in-sc-list.json') }}",
            type: "GET",               
            dataType: 'json',
            success: function(res) {                    
                    $('#cityPicker').html('<option value="">Select City</option>');
                    
                    $.each(res.states, function(key, value) { 
                        if (value.state == $('#statePicker').val()) {
                            console.log(value.districts);
                        $("#cityPicker").append('<option value="' + value
                            .districts + '">' + value.districts + '</option>');
                        }
                    });                    
               }
         });
    });

blade

<span>
     <select id="statePicker" name="statePicker" required class="form-control"></select>    
      <select id="cityPicker" name="cityPicker" required class="form-control"></select>          
</span>

>Solution :

let statePicker = $('#statePicker').val();
let list = $("#cityPicker");
$.each(res.states, function(key, value) { 
    if (value.state == statePicker) {
        $.each(items, function(item) {
          list.append(new Option(item, item));
        });
    }
});     

You need to loop value.districts because its an array, and also, you are doing it in a dirty way, you are initializing $("#cityPicker") on every loop, This might give some performance issues in future if the list items increases.