PnP - Search Filters template with multi-values

How do I update the template for PnP filters to separate the multi-values?

This is what the filter options look like now:

This is what the filter options should look like:

The code I have now for the filter template is:

<content id="data-content">

    <style>

                              .filter {

                                             margin-bottom: 30px;

                              }

                              .filter--value {

                                             white-space: nowrap;

                                             overflow: hidden;

                                             text-overflow: ellipsis;

                                             display: flex;

                                             align-items: center;

                              }

                              .filter--message {

                                             padding: 10px;

                              }

                   .filter--name {

                                             font-weight: bold;

                                             font-size: 16px;

                                             color: rgb(119, 117, 111);

                                             padding: 0px 0px 5px;

                              }

                              pnp-filtercheckbox {

                                             max-width: 100%;

                              }

                              pnp-filtercombobox {

                                  flex: 1;

                              }

                              pnp-filterComboBox > div {

                                  display: flex;

                                  align-items: stretch;

                                  padding: 0;

                              }

                              .filterComboBox {

                                  align-items: center;

                                  flex: 1;

                              }

                              #{{@root.instanceId}}wrapper {

                                  max-width: 100% !important;

                              }

                              .ms-ComboBox {

                                  max-width: 100% !important;

                                  min-width: 100%;

                                  width: 100%;

                              }

                              .ms-ComboBox-container {

                                  width: 100%;

                              }

                              .ms-ComboBox-header {

                                             bottom: 0;

                                             height: 45px;

                                             position: fixed;

                                             top: 127px;

                              }

                              .ms-Fabric {

                                  width: 100%;

                              }

    </style>

    <div class="template vertical"> 

                              {{#each root.filters as |filter|}}

                                             <div class="filter">

                                                                                          <div class="filter--name">{{filter.displayName}}</div>

                                                                                          <div class="filter--value">

                                                                                                         <pnp-filtercombobox

                                                                                                                        data-instance-id={{@root.instanceId}}

                                                                                                                        data-filter-name="{{filter.filterName}}"

                                                                                                                        data-is-multi="{{filter.isMulti}}"

                                                                                                                        data-show-count="{{filter.showCount}}"

                                                                                                                        data-theme-variant="{{JSONstringify root.theme}}"

                                                                                                         >

                                                                                                                                       {{#each filter.values}}

                                                                                                                                                      <option value="{{value}}" data-selected="{{selected}}" data-disabled="{{disabled}}" data-count="{{count}}">{{name}}</option>

                                                                                                                                       {{/each}}

                                                                                                         </pnp-filtercombobox>

                                                                                          </div>

                                             </div>                  

               {{/each}}

               </div>

</content>

I've tried a few different options with the help of ChatGPT but did not get anywhere.