// First, import what we need from React SDK.
  import { PageController, WidgetDataType, useSearchResults, widget } from '@sitecore-search/react';

  // Import the component generated by the CLI.
  import ResultsPerPage from '@/components/ResultsPerPage';

  function SearchResultsWrapper() {
    const {
      queryResult: { data },
    } = useSearchResults({
      state: {
        itemsPerPage: 24, // Set the default items per page, you can change this value or omit it.
      },
    });
    return (
      <>
        <ul>{data?.content?.map((content) => <li>{content.title}</li>)}</ul>
        <ResultsPerPage defaultItemsPerPage={24} />
      </>
    );
  };

  // Convert the regular component to a compatible widget.
  const SearchResultsWrapperWidget = widget(SearchResultsWrapper, WidgetDataType.SEARCH_RESULTS, 'content');

  // Then we can use the widget.
  function MyApp() {
    return (
      <WidgetsProvider {...CONFIG}>
        <SearchResultsWrapperWidget rfkId="rfkid_7" />
      </WidgetsProvider>
    )
  }