Hide snippet until matching result returns

In my code, I am returning the text snippet. But I want to hide it until the user starts searching and there is a match. It’s visible as soon as you click the search box.

Right now, the snippet is visible on the search page.

Using Instant Search.js

    container: "#hits",
    templates: {
      item(hit) {
        const apiTitle = (endpoint) => {
          const [method, pathname] = endpoint.split(" ").map((v) => v.trim());
          return `<span class="api-method-${method.toLowerCase()} mr-4">${method}</span> <span>${pathname}</span>`;
        return `
            <h2 class="hit-name text-sm font-semibold text-n-black leading-8">
             <a href="${hit.url}"> ${
          hit.apiMethod ? apiTitle(hit.endpoint) : `<span>${hit.title}</span> `
            <p class="hit-description text-n-gray-dark text-base">
            ${instantsearch.highlight({ attribute: "description", hit })}
            <p class="hit-text text-n-gray text-sm underline">
            ${instantsearch.snippet({ attribute: "text", hit })}