Using highlightPreTag with dangerouslySetInnerHTML in Autocomplete

I’m trying to use autocomplete with vanilla JS. How do I add highlighting to the item.title attribute? Here’s what I have so far. Seems to work well but no highlighting.

autocomplete({
  container: '#autocomplete',
  placeholder: 'Search...',
  autoFocus: true,
  debug:true,
  getSources({ query }) {
    return [
      {
        sourceId: 'main',
        getItems() {
          return getAlgoliaResults({
            searchClient,
            queries: [
              {
                indexName: 'main',
                query,
                params: {
                  hitsPerPage: 7,
                  attributesToHighlight: ['title'],
                  attributesToSnippet: ['title:10', 'description:35'],
                  snippetEllipsisText: '…',
                  highlightPreTag: '<strong>',
                  highlightPostTag: '</strong>',
                },
              },
            ],
          });
        },
        getItemUrl({ item }) {
          return item.uri;
        },
        templates: {
          item({ item, createElement }) {
            return createElement('div', {
              dangerouslySetInnerHTML: {
                __html: `
                <a href="${item.uri}">
                  <div class="primary" style="padding:4px 0 2px;">${item.title}</div>
                  <div class="smallest muted">${item.section}</div>
                </a>`,
              },
            });
          },
          noResults({ createElement }) {
            return createElement('div', {
              dangerouslySetInnerHTML: {
                __html: `<div class="muted">
                  No results
                <div>`,
              },
            });
          },
        },
      },
    ];
  },
});

Hi @stephan , can you create a Codesandbox to reproduce the issue? You can use this playground as an initial template.
Thanks!