group p: элементы списка выбора, как в теге html <optgroup>

Question

Я использую компонент p:pickList из простых лиц, как показано в примере:

Это мой код:

    <p:pickList id="cityPicklist" rendered="true" var="city"
                    style="font-size: 11px" effect="bounce" itemValue="#{city}"
                    converter="cityConverter" itemLabel="#{city}"
                    showSourceControls="true" showTargetControls="true"
                    showCheckbox="false" responsive="true" showSourceFilter="true"
                    showTargetFilter="true" filterMatchMode="contains"
                    value="#{myView.cities}">


                    <p:column style="width:100%">
                        <h:outputText value="#{city.name}" />
                    </p:column>

                </p:pickList>

Я пытаюсь добиться следующего результата:

сгруппированный список выбора

Но код, сгенерированный из простых лиц, отображает UL-тег с индивидуальным LI для каждого города из myView.cities.

<div class="ui-picklist-list-wrapper">

<ul class="ui-widget-content ui-picklist-list ui-picklist-source ui-corner-all ui-sortable" role="menu" tabindex="0">

<li class="ui-picklist-item ui-corner-all ui-sortable-handle" data-item-value="San Francisco" data-item-label="Europe" role="menuitem" style="
    font-weight: bold;
    margin-left: 1;"> Europe</li>

<li class="ui-picklist-item ui-corner-all ui-sortable-handle" data-item-value="London" data-item-label="London" role="menuitem" style="
    margin-left: 20px;
">London</li>

<li class="ui-picklist-item ui-corner-all ui-sortable-handle" data-item-value="Paris" data-item-label="Paris" role="menuitem" style="
    margin-left: 20px;

...

Есть ли способ сгруппировать элементы в списке выбора, используя библиотеку primefaces? или мне придется переписать этот компонент, чтобы добиться такого результата?

Любая помощь будет высоко ценится.

Благодарю.