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

  instantsearch.widgets.hits({
    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 `
          <div>
            <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> `
        } 
            </h2>
            <p class="hit-description text-n-gray-dark text-base">
            ${instantsearch.highlight({ attribute: "description", hit })}
            </p>
            <p class="hit-text text-n-gray text-sm underline">
            ${instantsearch.snippet({ attribute: "text", hit })} 
            </p>
            </a>
          </div>
        `;
      },
    },
  }),