Custom Share Tribe CMS Section Components on Error 400

Question

I need help with an issue custom section components on CMS pages within our Sharetribe implementation.

1. I created a ‘lender-listings’ section in the Console, which contains 4 blocks. Each block includes a 'title' and 'description'.
2. have successfully implemented data fetching using the loadData function to parse the lender IDs from the page asset and subsequently dispatch the listing fetching action.

Here is the the code:

export const lenderSectionId = 'lender-listings';
export const customPageId = 'how-it-works';
export const loadData = (params, search, config) => dispatch => {
  const pageId = params.pageId;
  const pageAsset = { [pageId]: `content/pages/${pageId}.json` };
  const hasFallbackContent = false;

  return dispatch(fetchPageAssets(pageAsset, true)).then(assetResp => {
    const lenderSections = assetResp[customPageId].data.sections;

    const customLenderSection = lenderSections.find(
      s => s.sectionId === lenderSectionId
    );

    if (customLenderSection) {
     
      const blocks = customLenderSection?.blocks;
      let lenderListingIds=[];
      for(let i=0; i < blocks.length; i++){
        lenderListingIds.push(blocks[i].blockName);
      }
      const listingParams = getLenderParams(config, lenderListingIds);
      dispatch(searchListings(listingParams, config));
    }
  });
  
};

The issue: I'm keep having HTTP 400 error when calling the GET method on https://flex-api.sharetribe.com through getLenderParams.

const getLenderParams = (config, lenderId) => {

  const {
    aspectWidth = 1,
    aspectHeight = 1,
    variantPrefix = 'listing-card',
  } = config.layout.listingImage;

  const aspectRatio = aspectHeight / aspectWidth;

  return {
    ids: lenderId,
    include: ['author', 'images'],
    'fields.listing': [
      'title',
      'price',
      'publicData.transactionProcessAlias',
    ],
    'fields.user': ['profile.displayName', 'profile.abbreviatedName'],
    'fields.image': [
      'variants.scaled-small',
      'variants.scaled-medium',
      `variants.${variantPrefix}`,
      `variants.${variantPrefix}-2x`,
    ],
    ...createImageVariantConfig(`${variantPrefix}`, 400, aspectRatio),
    ...createImageVariantConfig(`${variantPrefix}-2x`, 800, aspectRatio),
    'limit.images': 0,
  };
}

I want understand why I keep encountering a '400 error', and I dont understand about the function of getLenderParams, particularly at this part:

  return {
    ids: lenderId,
    include: ['author', 'images'],
    'fields.listing': [
      'title',
      'price',
      'publicData.transactionProcessAlias',
    ],
    'fields.user': ['profile.displayName', 'profile.abbreviatedName'],
    'fields.image': [
      'variants.scaled-small',
      'variants.scaled-medium',
      `variants.${variantPrefix}`,
      `variants.${variantPrefix}-2x`,
    ],
    ...createImageVariantConfig(`${variantPrefix}`, 400, aspectRatio),
    ...createImageVariantConfig(`${variantPrefix}-2x`, 800, aspectRatio),
    'limit.images': 0,
  };

My attempts to resolve 400 error:

• Checked for any data mismatch or incorrect parameters.
• Verified API key and access permissions.