display the size options in the correct order in shopify

On the collection page, the size options in the filter are displayed chaotically, roughly like this:

M-Size
XS-Size
L-Size
S-Size

And I need to organize it like:

XS-Size
S-Size
M-Size
L-Size

And I have an idea. I create an array with these sizes, but in the correct order. Like this:

{% assign sizes_order_array = 'XS-Size,S-Size,M-Size,L-Size' | upcase | split: "," %}

And I just want to map each option in the if condition, inside the for loop. It goes like this:

{% for filter in collection.filters %}
   <ul>
      {% for filter_value in filter.values %}
         {% capture option_item %}
            <li>...any option size code</li>
         {% endcapture %}
         {% assign filter_value_label = filter_value.label | upcase %}
         {% for size in sizes_order_array %}                                 
            {% if filter_value_label == size %}
               {{ option_item }}
            {% endif %}
         {% endfor %}
      {% endfor %}
   </ul>
{% endfor %}

I put the li tag itself with the option body in capture. And this code still displays the options in the same order as:

M-Size
XS-Size
L-Size
S-Size

Why is this happening? I’m doing an {% if filter_value_label == size %} ... {% endif %} check.

What is the error, please tell me!