Algolia React Autocomplete Creating a custom renderer

Question

Hey so I'm trying to make a custom Autocomplete render with algolia in react. I'm following this guide: https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/

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 
'6be0576ff61c053d5f9a3225e2a90f76' // I have changed this 
);

export function TestAutocomplete({props, ...autocompleteProps}) {
// (1) Create a React state.
const [autocompleteState, setAutocompleteState] = useState({isOpen: false});
const autocomplete = useMemo(
    () =>
        createAutocomplete({
            ...autocompleteProps,
            onSubmit({ state }) {
                setAutocompleteState(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({
                                searchClient,
                                queries: [
                                    {
                                        indexName: 'b2b_commerce_test', // I have changed this 
                                        query,
                                        params: {
                                            hitsPerPage: 4,
                                            highlightPreTag: '<mark>',
                                            highlightPostTag: '</mark>',
                                        },
                                    },
                                ],
                            });
                        },
                        getItemUrl({ item }) {
                            return item.url;
                        },
                    },
                ];
            },
            ...props,
        }),
    [props]
);

This is how my algolia b2b_commerce_test objects look likes: as you can see most of my date is inside the "fields" attribute, how do I make my function autocomplete hit that?

{
"visible_by": [
    "0017R00002vMyIaQAK",
    "0017R00002pKDDwQAO",
    "0017R00002vNr7VQAS"
  ],
  "price": 335,
  "image": "https://res.cloudinary.com/dtdvgntkq/image/upload/v1685689515/products/WF-001_dltflk.png",
  "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"