$('.selectpicker').selectpicker('refresh'); not working - php

Question

I am trying to use bootstrap-select and laravel 7 to improve the style of one my projects but when the options of the select are built dynamically the plugin does not work and I do not find the error. I have included the $('.selectpicker').selectpicker('refresh'); as proposed by this answer but still I am not able to achieve what I want. The HTML is the following and works perfectly:
blade
<div class="col-md-6 mb-3">
<label for="state_id">State</label>
<select class="form-control selectpicker" id="state_id" name="state_id">
#foreach($states as $state)
<option value="{{ $state->id }}">{{ $state->name }}</option>
#endforeach
</select>
</div>
<div class="col-md-6 mb-3">
<label for="city_id">City</label>
<select class="form-control selectpicker" id="city_id" name="city_id">
</select>
</div>
script
<script>
$(document).on('change', '#state_id', function() {
$('.selectpicker').selectpicker('refresh');
let state_id = $(this).val();
let select = $('#city_id');
$.ajax({
type: 'get',
url: '{{ route('findIDState') }}',
data: {'id':state_id},
success: function(data){
select.html('');
for (var i = 0; i < data.length; i++){
select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
}
},
error: function(){
console.log('this is a error');
},
}

Answer 1

Refresh select2 after appending
<script>
$(document).on('change', '#state_id', function() {
$('.selectpicker').selectpicker('refresh');
let state_id = $(this).val();
let select = $('#city_id');
$.ajax({
type: 'get',
url: '{{ route('findIDState') }}',
data: {'id':state_id},
success: function(data){
select.html('');
for (var i = 0; i < data.length; i++){
select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
}
$('.selectpicker').selectpicker('refresh');
},
error: function(){
console.log('this is a error');
},
});
}).trigger('change');
</script>