JSF selectOneMenu update currency symbol

Question

I have a list of currencies and I want to update the currency symbol in another component.

The facelet

<h:form id="form">
    <p:selectOneMenu id="currency" value="#{testBean.currency}"
    hideNoSelectionOption="#{not empty testBean.currency}"
    >
        <p:ajax update="@this amount" listener="#{testBean.onChange}" process="@this"/>
        <f:selectItem itemLabel="-- vide --" itemValue="#{null}" noSelectionOption="true"/>
        <f:selectItems value="#{testBean.currencies}" />
    </p:selectOneMenu>

    <h:outputLabel for="amount" value="Valeur:" />
    <h:outputText id="amount" value="#{testBean.value}">
        <f:convertNumber type="currency" currencyCode="#{empty testBean.currency ? 'EUR' : testBean.currency}" />
    </h:outputText>
</h:form>

The bean :

@Named
@ViewScoped
public class TestBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private final List<String> currencies = Arrays.asList("EUR", "USD", "CHF");
    private Double value = 3.14;
    private String currency;

    public void onChange() {
        value *= 1.1;
    }

    public String getCurrency() {
        return currency;
    }

    public void setCurrency(String currency) {
        this.currency = currency;
    }

    public Double getValue() {
        return value;
    }

    public void setValue(Double value) {
        this.value = value;
    }

    public List<String> getCurrencies() {
        return currencies;
    }
}

Curiously, the currency output is not correct.

• First display : |Vide| Valeur:€3.14
• Second display :|USD| Valeur:€3.45
• Third display : |CHF| Valeur:$3.80
• Fourth display :|USD| Valeur:CHF4.18

Why is the currency behind ?

Tested with primefaces 12.0.0 wildfly 25.0.1, payara 5.2021.3