Algolia React Autocomplete Creating a custom renderer

Hey so I’m trying to make a custom Autocomplete render with algolia in react. I’m following this guide: Creating a custom renderer | Autocomplete | Algolia

So far so good, it works with their searchClient and Index, but when I change to my own index its not showing any results. Here is my code and I thnik the problem is with the sourceId do I need to change that?

const searchClient = algoliasearch(
'latency', // I have changed this to my key
'6be0576ff61c053d5f9a3225e2a90f76' // I have changed this to my apikey

export function TestAutocomplete({props, ...autocompleteProps}) {
// (1) Create a React state.
const [autocompleteState, setAutocompleteState] = useState({isOpen: false});
const autocomplete = useMemo(
    () =>
            onSubmit({ state }) {
                console.log('Submitted query:', state.query);

            getSources() {
                return [
                    // (3) Use an Algolia index source.
                        sourceId: 'products', //should i change this? 
                        // getItemInputValue({ item }) {
                        //  return item.hits;
                        // },
                        getItems({ query }) {
                            return getAlgoliaResults({
                                queries: [
                                        indexName: 'b2b_commerce_test', // I have changed this my index
                                        params: {
                                            hitsPerPage: 4,
                                            highlightPreTag: '<mark>',
                                            highlightPostTag: '</mark>',
                        getItemUrl({ item }) {
                            return item.url;

This is how my algolia b2b_commerce_test objects look likes: So as you can see most of my information about the product is inside the “fields” attribute. How do I hit that nested in my autocomplete code?

  "visible_by": [
  "price": 335,
  "image": "",
  "id": "01t7R00000A0h8gQAB",
  "fields": {
    "attributes": {
      "type": "Product2",
      "url": "/services/data/v58.0/sobjects/Product2/01t7R00000A0h8gQAB"
    "Id": "01t7R00000A0h8gQAB",
    "Name": "Wolf",
    "ProductCode": "WF-001",
    "Description": "Often depicted as a fierce and cunning villain, the wolf's pack mentality and hunting skills make it a popular choice for movies.",
    "IsActive": true,
    "CreatedDate": "2023-05-18T07:19:44.000+0000",
    "CreatedById": "0057R00000CfYquQAF",
    "LastModifiedDate": "2023-05-21T11:55:36.000+0000",
    "LastModifiedById": "0057R00000CfYquQAF",
    "SystemModstamp": "2023-05-21T11:55:36.000+0000",
    "Family": "Canidae",
    "CurrencyIsoCode": "EUR",
    "IsDeleted": false,
    "IsArchived": false,
    "LastViewedDate": "2023-06-05T07:17:14.000+0000",
    "LastReferencedDate": "2023-06-05T07:17:14.000+0000",
    "StockKeepingUnit": "WF-001",
    "ProductClass": "Simple",
    "Weight__c": "100 lb"
  "objectID": "WF-001"

After this gets to work, I want to implement th createQuerySuggestionsPlugin, how can I implement this code into my TestAutocomplete.

const querySuggestionsPlugin = createQuerySuggestionsPlugin({
            categoryAttribute: [
            transformSource({ source }) {
               console.log("source", source)
                return {
                    onSelect({ item }) {
                        setIndexUiState((indexUiState) => ({
                            query: item.query,
                            menu: {
                                categories: item.__autocomplete_qsCategory || '',