Laravel Livewire Dependent Dropdown does not fill values on edit

Question

I am trying to implement a dependent dropdown using Laravel Livewire along with Jetstream. Everything worked fine, but there is one minor problem though. When I click on edit button, I am trying to fill the given details from the database. But unfortunately, the dropdown details do not fill. However, the text input fetches the value and displays it.

Here is the blade file:

<form>
    <div class="form-group">
        <x-jet-label for="countryName">Select Country</x-jet-label>
        <select class="form-control" name="country_name" id="countryName" wire:model="countryId">
            <option value="">-- Select a country --</option>
            @foreach($countries as $country)
            <option value="{{ $country->country_id}}">{{ $country->country_name }}</option>
            @endforeach
        </select>
        @error('country_id') <span class="text-danger">{{ $message }}</span>@enderror
        &nbsp;
        &nbsp;


        <x-jet-label for="stateName">Select State</x-jet-label>
        <select class="form-control" name="state_name" id="stateName" wire:model="stateId">
            <option value="">-- Select a state --</option>
            @if (!is_null($states))
            @foreach ($states as $state)
            <option value="{{ $state->state_id}}">{{ $state->state_name }}</option>
            @endforeach
            @endif
        </select>
        @error('state_id') <span class="text-danger">{{ $message }}</span>@enderror
        &nbsp;
        &nbsp;


        <x-jet-label for="cityName" style="">City Name:</x-jet-label>
        <x-jet-input type="text" name="city_name" id="cityName" placeholder="Enter City Name" wire:model="city_name" />
        @error('city_name') <span class="text-danger">{{ $message }}</span>@enderror
    </div><br>
    <x-jet-button wire:click.prevent="update()" class="btn btn-success">Update</x-jet-button>&nbsp;&nbsp;
    <x-jet-danger-button wire:click.prevent="cancel()" class="btn btn-danger">Cancel</x-jet-danger-button>
</form>

And edit function is like:

public function edit($city_id)
{
    $city = City::findOrFail($city_id);
    $this->city_id=$city_id;
    $this->city_name=$city->city_name;
    $this->countryId=$city->country_id;
    $this->stateId=$city->state_id;

    $this->updateMode = true;
}

When I select any option manually from the dropdown, it works.

I am new to laravel and am stuck here... Any help would be highly appreciated. Thank you.