Mublazor Autocomplete Render Custom HTML

I have to display cities of a country in a Group form, for example my data source is a dictionary like

Country1

City1

City2

City3

Country2

City1

City4

City5

City6

If user search for City2, I need to show Country1 as a heading and then City1 under that heading and If user search for City1, I need to show Country1 and then City and then Country2 and City1

I have done similar thing in Bootstrap and it rendered like

• Country1
• City1
• Country2
• City1

and then I can add css to adjust spaces.

So question is, how can I render customer HTML in Blazor Autocpmplete?

This is what I want to achieve but in Mudblazor autocomplete

 _renderMenu: function (ul, items) {    var that = this,        currentCountry = "";    $.each(items, function (index, item) {        var li;        if (item.country != currentCountry) {            ul.append("<li class='ui-autocomplete-country pl-2 pt-2 font-weight-bold'>" + item.country +"</li>");            currentCountry = item.country;        }        li = that._renderItemData(ul, item);    });},_renderItem: function (ul, item) {    return $("<li></li>")        .data("item.autocomplete", item)        .append('<div class="place-name font-weight-lighter pb-2 pl-3">'+ item.city+'</br><span class="font-weight-normal" style="font-size:12px;"></span></div>')        .appendTo(ul);}