Empty results in autocomplete

[yaman.abdulah]

Hello, I’m implementing Algolia Search with Auto complete
This is my code

import React, { useRef, useEffect } from 'react';
import { autocomplete, getAlgoliaResults, getAlgoliaFacets } from '@algolia/autocomplete-js';
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
import { h, Fragment } from 'preact';
import { searchClient } from './SearchClient';
import { ProductItem } from './ProductItem';
import '@algolia/autocomplete-theme-classic';


const SearchInput = props => {
  const containerRef = useRef();

  // Create the Query Suggestions plugin
  const querySuggestionsPlugin = createQuerySuggestionsPlugin({
    searchClient,
    indexName: 'events',
    getSearchParams({ state }) {
      return { hitsPerPage: state.query ? 3 : 10 };
    },
  });

  useEffect(() => {
    if (!containerRef.current) {
      return;
    }

    const search = autocomplete({
      container: containerRef.current,
      placeholder: 'Search for products',
      openOnFocus: true, 
      plugins: [querySuggestionsPlugin],
      getSources({ query, state }) {
        if (!query) {
          return [];
        }

        return [
          {
            sourceId: 'events',
            getItems() {
              return getAlgoliaResults({
                searchClient,
                queries: [
                  {
                    indexName: 'events',
                    query,
                    params: {
                      hitsPerPage: 3,
                      attributesToSnippet: ['name:10'],
                      attributesToHighlight: ['name'],
                      snippetEllipsisText: '…',
                    },
                  },
                ],
              });
            },
            templates: {
              header() {
                return (
                  <Fragment>
                    <span className="aa-SourceHeaderTitle">Products</span>
                    <div className="aa-SourceHeaderLine" />
                  </Fragment>
                );
              },
              item({ item, components }) {
                return <div>hi</div>;
              },
              noResults() {
                return 'No products for this query.';
              },
            },
          }
        ];
      },
    });

    return () => search.destroy();
  }, [containerRef]);
  return <div ref={containerRef} />;
};
export default SearchInput;

I’m getting search results correct from the api but the dropdown is not displaying content