cascade dropdown not working

<div class="row" >

 <div class="col-md-4">

 <select aria-label="Select a Impact Level"

 data-control="select2"

 data-placeholder="Select an Impact Level..."

 class="form-select form-select-solid form-select-lg fw-semibold select2-hidden-accessible" onchange="@CountryClicked">

 <option value="">-- Select Country --</option>

 @foreach (var country in ProcessImpactTypes)

 {

 <option value="@country.ProcessImpactTypeId">@country.ProcessImpactTypeName</option>

 }

 </select>

 </div>

 <div class="col-md-4">

 <select aria-label="Select a Impact Level"

 data-control="select2"

 data-placeholder="Select an Impact Level..."

 class="form-select form-select-solid form-select-lg fw-semibold " onchange="@CityClicked">

 <option value="">-- Select City --</option>

 @if (ImpactLevelMasters != null)

 {

 @foreach (var city in ImpactLevelMasters)

 {

 <option value="@city.ImpactLevelMasterId">@(city.Level + "|"+ city.LevelValue)</option>

 }

 }

 </select>

 </div>

 </div>

protected async void CountryClicked(ChangeEventArgs countryEvent)

 {

 int value = Convert.ToUInt16(countryEvent.Value);

 ImpactLevelMasters = await ProcessImpactBizServices.GetProcessImpactLevelByProcessImpactTypeId(value, ClientId);

 EditImpactType.ProcessImpactTypeId = value;

 StateHasChanged();

 //cityList.Clear();

 //cityName = string.Empty;



 //countryId = countryEvent.Value.ToString();

 //countryName = countryList.FirstOrDefault(s => s.CountryId == countryId).CountryName;





 this.StateHasChanged();

 }



 void CityClicked(ChangeEventArgs cityEvent)

 {

 //cityName = cityEvent.Value.ToString();

 this.StateHasChanged();

 }