tutor components.Highlight

[username11221]

sorry, I am noob.
I try code from manual:

import { autocomplete } from '@algolia/autocomplete-js';
import '@algolia/autocomplete-theme-classic';


autocomplete({
  container: '#site-search',
  getSources() {
    return [
      {
        sourceId: 'links',
        getItems({ query }) {
          const items = [
            { label: 'twitter twitter twitter', url: 'https://twitter.com' },
            { label: 'github github github', url: 'https://github.com' },
            { label: 'qwerty qwerty qwerty', url: 'https://qwerty.qwerty' },
          ];

          return items.filter(({ label }) =>
            label.toLowerCase().includes(query.toLowerCase())
          );
        },
        getItemUrl({ item }) {
          return item.url;
        },
        templates: {
          item({ item, components, html }) {
            return html`<div>
                ${components.Highlight({ hit: item, attribute: 'label', tagName: 'b', })}
            </div>`;
          },

        },
      },
    ];
  },
});

I expect wrapping my substring like:
<b>twi</b>tter or <b>git</b>hub

but did not see any tags in markup: