Filter checkboxes appear blank in Fiori's ViewSettingsDialogs

I am following the tutorials from UI5 Web Components playground and I'm having some issues with the ViewSettingsDialog component. I have set up a simple local hosted web app (following the introductory tutorial) and copy-pasted the code from the playground.

Here's how my main.js file looks like:

import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog";
import "@ui5/webcomponents-fiori/dist/SortItem";
import "@ui5/webcomponents-fiori/dist/FilterItem";

document.querySelector('#app').innerHTML = `  
  <ui5-button id="btnOpenDialog1">Open ViewSettingsDialog</ui5-button>
  <ui5-view-settings-dialog id="vsd1" sort-descending="true">
    <ui5-sort-item slot="sortItems" text="Name" data-key="name" selected=""></ui5-sort-item>
    <ui5-sort-item slot="sortItems" text="Position" data-key="position"></ui5-sort-item>
    <ui5-sort-item slot="sortItems" text="Company" data-key="company"></ui5-sort-item>
    <ui5-sort-item slot="sortItems" text="Department" data-key="department"></ui5-sort-item>
    <ui5-filter-item slot="filterItems" text="Position">
        <ui5-filter-item-option slot="values" text="CTO"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="CPO"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="VP"></ui5-filter-item-option>
    </ui5-filter-item>
    <ui5-filter-item slot="filterItems" text="Department">
        <ui5-filter-item-option slot="values" text="Sales"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="Management"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="PR"></ui5-filter-item-option>
    </ui5-filter-item>
    <ui5-filter-item slot="filterItems" text="Location">
        <ui5-filter-item-option slot="values" text="Walldorf"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="New York"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="London"></ui5-filter-item-option>
    </ui5-filter-item>
    <ui5-filter-item slot="filterItems" text="Reports to">
        <ui5-filter-item-option slot="values" text="CTO"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="CPO"></ui5-filter-item-option>
        <ui5-filter-item-option slot="values" text="VP"></ui5-filter-item-option>
    </ui5-filter-item>
  </ui5-view-settings-dialog>
  <br />
  <br />
  <div id="vsdResults"></div>  
`;

var vsdResults = document.getElementById("vsdResults");

btnOpenDialog1.addEventListener("click", function () {
    vsdResults.innerHTML = "";
    vsd1.show();
});

vsd1.addEventListener("confirm", function(evt) {
    vsdResults.innerHTML = JSON.stringify(evt.detail);
    vsdResults.innerHTML += "<br><br>order by key:" + evt.detail.sortByItem.dataset.key;
});

The application looks good. After clicking the button btnOpenDialog1 the settings dialog is shown. The sorting tab works like a charm, but when I try to set a filter, the options are displayed blank:

However, in the example usage on UI5 Web Components site, the filter options are correctly displayed:

Am I missing anything? I just copy-pasted the code from the example usage but I'm unable to make it work.

In order to use any component you have to import its class in order to define it as tag. In your case you need to call

import "@ui5/webcomponents-fiori/dist/FilterItemOption"; in your js file so ui5-filter-item-option tag is defined and could later be used within your html / template.