How to change language switcher on multisite in october cms ver 3

Question

How to correctly change the output of lists of names sites in language switcher to flags images?

In documentation

<select class="form-control" onchange="window.location.assign(this.value)">
    {% for site in sitePicker.sites %}
        <option value="{{ site.url }}" {{ this.site.code == site.code ? 'selected' }}>
            {{ site.name }}
        </option>
    {% endfor %}
</select>

I need to change the site.name to flags images

Thanks a lot

I try to customize that code from demo themplates and no finding good solution

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                                {% if sitePicker.isEnabled %}
                                            <li class="nav-item dropdown">
                                                <a class="btn btn-outline-light dropdown-toggle" href="{{ ''|page }}" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    {{ this.site.name|default('Sites') }}
                                                </a>
                                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                    {% for site in sitePicker.sites %}
                                                        <li><a class="dropdown-item {{ this.site.code == site.code ? 'active' }}" href="{{ site.url }}">{{ site.name }}</a></li>
                                                    {% endfor %}
                                                    {% if backendUrl %}
                                                        <li><hr class="dropdown-divider"></li>
                                                        <li><a class="dropdown-item" href="{{ backendUrl }}">Backend Area</a></li>
                                                    {% endif %}
                                                </ul>
                                            </li>
                                        {% elseif backendUrl %}
                                            <li class="nav-item">
                                                <a class="btn btn-outline-light" href="{{ backendUrl }}" target="backend">Backend Area</a>
                                            </li>
                                {% endif %}
                            </ul>