Templates: {item: data => '<p>${data.name}</p>'} produces a list of "1. ${data.name}" without resolving data

Open Q&A
,
1

I’m using vanilla JS in a webforms .net web application. I’m using JS within script tags. I have response object returned and all looks well with population of 20 hits.

Without entering anything in the search box it always displays a list of 20 items in html on the page as

InstantSearch.js e-commerce demo
search for your printer or cartridge

1 ${data.name}
1 ${data.url}

2 ${data.name}
2 ${data.url}

3  ${data.name}
3  ${data.url}

When I enter a letter in the search box the text is updated to the same without showing the data from the response object. So the same code text as above.
Here is my code.

type or paste code here
I had a 403 error so will just put a bit of the code as having some difficulty.

search.addWidget(
        instantsearch.widgets.hits({
            container: "#hits",
            templates: {
                item: data => '<p>${data.name}</p> <div class="url">${data.url}</div>'
            }
        })
    )

    search.start();