Laravel dependent dropdown for update loads all the states by default

In my Laravel-5.8, I am using dependent dropdown for country and corresponding states. For the create view blade, I have this:

public function getStateList(Request $request)
{
    $states = DB::table("config_states")
                ->where("country_id",$request->country_id)
                ->pluck("state_name","id")
                ->sortByDesc('state_name');
    return response()->json($states);
}

create.blade

          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> Country:</label>
              <select id="country" class="form-control select2bs4" data-placeholder="Choose Country" tabindex="1" name="country_id" style="width: 100%;">
                <option value="" selected disabled>Select Country</option>
                   @if($countries->count() > 0 )
                     @foreach($countries as $country)
                       <option value="{{$country->id}}">{{$country->country_name}}</option>
                     @endforeach
                   @endif
              </select>
            </div>
            <!-- /.form-group -->
          </div>

            
          <!-- /.col -->
          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> State:</label>
              <select id="state" class="form-control select2bs4" data-placeholder="Choose State" tabindex="1" name="state_id" style="width: 100%;">
              </select>
            </div>
            <!-- /.form-group -->
          </div>

Javascript

<script type="text/javascript">
    $('#country').change(function(){
    var countryID = $(this).val();    
    if(countryID){
        $.ajax({
           type:"GET",
           url:"{{url('get-state-list')}}?country_id="+countryID,
           success:function(res){               
            if(res){
                $("#state").empty();
                $("#state").append('<option>Select</option>');
                $.each(res,function(key,value){
                    $("#state").append('<option value="'+key+'">'+value+'</option>');
                });
           
            }else{
               $("#state").empty();
            }
           }
        });
    }else{
        $("#state").empty();
    }      
   });
        

   });
</script>

This works.

However, for the edit view blade:

        <div class="row">
          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> Country:</label>
              <select id="country" class="form-control select2bs4" data-placeholder="Choose Country" tabindex="1" name="country_id" style="width: 100%;">
                <option value="" selected disabled>Select Country</option>
                   @if($countries->count() > 0 )
                     @foreach($countries as $country)
                       <option value="{{$country->id}}" @if($country->id == $employee->country_id) selected @endif>{{$country->country_name}}</option>
                     @endforeach
                   @endif
              </select>
            </div>
            <!-- /.form-group -->
          </div>

            
          <!-- /.col -->
          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> State:</label>
              <select id="state" class="form-control select2bs4" data-placeholder="Choose State" tabindex="1" name="state_id" style="width: 100%;">
              </select>
            </div>
            <!-- /.form-group -->
          </div>

Javascript

<script type="text/javascript">
    $('#country').change(function(){
    var countryID = $(this).val();    
    if(countryID){
        $.ajax({
           type:"GET",
           url:"{{url('get-state-list')}}?country_id="+countryID,
           success:function(res){               
            if(res){
                $("#state").empty();
                $("#state").append('<option>Select</option>');
                $.each(res,function(key,value){
                    $("#state").append('<option value="'+key+'">'+value+'</option>');
                });
           
            }else{
               $("#state").empty();
            }
           }
        });
    }else{
        $("#state").empty();
    }      
   });
        

   });
</script>

II expect it by default to load the current state of origin from the database into the select id="state" dropdown but it was empty.

Then when I changed it to:

          <div class="col-12 col-sm-4">
            <div class="form-group">
              <label class="control-label"> State:</label>
              <select id="state" class="form-control select2bs4" data-placeholder="Choose State" tabindex="1" name="state_id" style="width: 100%;">
                <option value="" selected disabled>Select state</option>
                   @if($states->count() > 0 )
                     @foreach($states as $state)
                       <option value="{{$state->id}}" @if($state->id == $employee->state_id) selected @endif>{{$cstate->state_name}}</option>
                     @endforeach
                   @endif
              </select>
            </div>
            <!-- /.form-group -->
          </div>

It loads all the states of origin in the database instead of the corresponding state.

Yes, the state are populates when you change a selected country. But what I'm saying is that for the edit view blade, since it loads the country_name into the select dropdown from the database before onchange using the id, it should also do likewise for state_name. This is not happening

I have update the controller code. What I'm saying is this, when the edit page is rendered, if the country_name is Ghana and the state_name is Accra, it should load that as the value of the select option. This don't need on change. It should first display what is in the database based on the id. Then after this, we can apply onchange

How do I resolve this?

Thanks