// First, import what we need from React SDK
  import { widget, usePreviewSearch, WidgetDataType } from "@sitecore-search/react";
  // Import PreviewSearch primitive from UI package
  import { PreviewSearch } from '@sitecore-search/ui';
  //import our component
  import SuggestionBlock from '@/components/SuggestionBlock';
  // SuggestionBlock needs to be under the Preview Search widget context
  // and also wrapped by PreviewSearch.Root component.
  // To accomplish that, we need to create a widget using the
  // widget function and to get facet data we use usePreviewSearch hook.
  // Also we need to import PreviewSearch component from @sitecore-search/ui
  // and add the content within PreviewSearch.Root.
  const PreviewSearchComponent = () => {
  const {
    queryResult: {
      isLoading,
      data: {
        suggestion: {
          title_context_aware: suggestions = [],
        } = {},
      } = {},
    },
  } = usePreviewSearch({
    state: {
      suggestionsList: [{ suggestion: 'title_context_aware', max: 4 }],
      itemsPerPage: 4,
      keyphrase: 'sitecore'
    },
  });
  return <PreviewSearch.Root>{!isLoading && <SuggestionBlock items={suggestions} title={'Suggestions'} blockId={'title_context_aware'} />}</PreviewSearch.Root>;
};

  // Convert the regular component to a compatible widget.
  const PreviewSearchWrapperWidget = widget(PreviewSearchComponent, WidgetDataType.PREVIEW_SEARCH, 'content');

  // Then, we can use the widget
  function MyApp() {
    return (
      <WidgetsProvider {...CONFIG}>
        <PreviewSearchWrapperWidget rfkId="rfkid_6" />
      </WidgetsProvider>
    )
  };