How to display different value than MatOption selected Value (i'm using MatSelect in Blazor)

Question

How to display different value than MatOption selected Value (i'm using MatSelect in Blazor).

for Eg:

<MatSelect id="dc_Origin" Label="Origin" @bind-Value="@originCodeEmptyString">
   @foreach (var item in GetMasterData.Value.MasterDataResult.ServiceAirports)
   {
    <MatOptionString Value="@item.AirportCode" @onclick='()=> OriginFlight_OnChange(item.AirportCode)' data-loading-text="" >
          <div class="CustomTypeahead">
          <p>
              <span>@item.CityName</span>
              <span>@item.AirportCode</span>
          </p>
          <label>@item.AirportName</label>
         </div>
    </MatOptionString>
    }
  </MatSelect>

Default value is showing as : "Delhi DEL AirportName",

I want to display like : "AirportName (DEL)"