How to use the @pnp/spfx-property-controls/lib/PropertyFieldCollectionData.PropertyFieldCollectionData function in @pnp/spfx-property-controls

if (!this.properties.customTemplateFieldValues) {
                this.properties.customTemplateFieldValues = currentCodeRenderer.customFields.map(field => {
                    return {
                        fieldName: field,
                        searchProperty: ''
                    };
                });
            }
            if (currentCodeRenderer.customFields && currentCodeRenderer.customFields.length > 0) {
                const searchPropertyOptions = this.properties.selectedProperties.split(',').map(prop => {
                    return ({
                        key: prop,
                        text: prop
                    });
                });
                stylingFields.push(PropertyFieldCollectionData('customTemplateFieldValues', {
                    key: 'customTemplateFieldValues',
                    label: strings.customTemplateFieldsLabel,
                    panelHeader: strings.customTemplateFieldsPanelHeader,
                    manageBtnLabel: strings.customTemplateFieldsConfigureButtonLabel,
                    value: this.properties.customTemplateFieldValues,
                    fields: [
                        {
                            id: 'fieldName',
                            title: strings.customTemplateFieldTitleLabel,
                            type: CustomCollectionFieldType.string,
                        },
                        {
                            id: 'searchProperty',
                            title: strings.customTemplateFieldPropertyLabel,
                            type: CustomCollectionFieldType.dropdown,
                            options: searchPropertyOptions

];
        console.log(stylingFields);
        if (!this.codeRendererIsSelected()) {
            stylingFields.push(
                this._propertyFieldCodeEditor('inlineTemplateText', {
                    label: strings.DialogButtonLabel,
                    panelTitle: strings.DialogTitle,
                    initialValue: this._templateContentToDisplay,
                    deferredValidationTime: 500,
                    onPropertyChange: this.onPropertyPaneFieldChanged,
                    properties: this.properties,
                    disabled: !canEditTemplate,
                    key: 'inlineTemplateTextCodeEditor',
                    language: this._propertyFieldCodeEditorLanguages.Handlebars
                }),
                PropertyFieldCollectionData('resultTypes', {
                    manageBtnLabel: strings.ResultTypes.EditResultTypesLabel,
                    key: 'resultTypes',
                    panelHeader: strings.ResultTypes.EditResultTypesLabel,
                    panelDescription: strings.ResultTypes.ResultTypesDescription,
                    enableSorting: true,
                    label: strings.ResultTypes.ResultTypeslabel,
                    value: this.properties.resultTypes,
                    fields: [
                        {
                            id: 'property',
                            title: strings.ResultTypes.ConditionPropertyLabel,
                            type: CustomCollectionFieldType.string,
                            required: true,
                        },
                        {
                            id: 'operator',

type: CustomCollectionFieldType.dropdown,
                        required: true,
                        options: [
                            {
                                key: ISortFieldDirection.Ascending,
                                text: strings.Sort.SortDirectionAscendingLabel
                            },
                            {
                                key: ISortFieldDirection.Descending,
                                text: strings.Sort.SortDirectionDescendingLabel
                            }
                        ]
                    }
                ]
            }),
            PropertyFieldCollectionData('sortableFields', {
                manageBtnLabel: strings.Sort.EditSortableFieldsLabel,
                key: 'sortableFields',
                panelHeader: strings.Sort.EditSortableFieldsLabel,
                panelDescription: strings.Sort.SortableFieldsDescription,
                label: strings.Sort.SortableFieldsPropertyPaneField,
                value: this.properties.sortableFields,
                fields: [
                    {
                        id: 'sortField',
                        title: strings.Sort.SortableFieldManagedPropertyField,
                        type: CustomCollectionFieldType.string,
                        placeholder: '\"Created\", \"Size\", etc.',
                        required: true
                    },
                    {
                        id: 'displayValue',

}
                ]
            }),
            PropertyPaneToggle('enableQueryRules', {
                label: strings.EnableQueryRulesLabel,
                checked: this.properties.enableQueryRules,
            }),
            PropertyPaneTextField('selectedProperties', {
                label: strings.SelectedPropertiesFieldLabel,
                description: strings.SelectedPropertiesFieldDescription,
                multiline: true,
                resizable: true,
                value: this.properties.selectedProperties,
                deferredValidationTime: 300
            }),
            PropertyFieldCollectionData('refiners', {
                manageBtnLabel: strings.Refiners.EditRefinersLabel,
                key: 'refiners',
                panelHeader: strings.Refiners.EditRefinersLabel,
                panelDescription: strings.Refiners.RefinersFieldDescription,
                label: strings.Refiners.RefinersFieldLabel,
                value: this.properties.refiners,
                fields: [
                    {
                        id: 'refinerName',
                        title: strings.Refiners.RefinerManagedPropertyField,
                        type: CustomCollectionFieldType.string,
                        placeholder: '\"RefinableStringXXX\", etc.'
                    },
                    {
                        id: 'displayValue',
                        title: strings.Refiners.RefinerDisplayValueField,

const searchSettingsFields: IPropertyPaneField[] = [
            PropertyPaneTextField('queryTemplate', {
                label: strings.QueryTemplateFieldLabel,
                value: this.properties.queryTemplate,
                multiline: true,
                resizable: true,
                placeholder: strings.SearchQueryPlaceHolderText,
                deferredValidationTime: 300
            }),
            PropertyPaneTextField('resultSourceId', {
                label: strings.ResultSourceIdLabel,
                multiline: false,
                onGetErrorMessage: this.validateSourceId.bind(this),
                deferredValidationTime: 300
            }),
            PropertyFieldCollectionData('sortList', {
                manageBtnLabel: strings.Sort.EditSortLabel,
                key: 'sortList',
                panelHeader: strings.Sort.EditSortLabel,
                panelDescription: strings.Sort.SortListDescription,
                label: strings.Sort.SortPropertyPaneFieldLabel,
                value: this.properties.sortList,
                fields: [
                    {
                        id: 'sortField',
                        title: "Field name",
                        type: CustomCollectionFieldType.string,
                        required: true,
                        placeholder: '\"Created\", \"Size\", etc.'
                    },
                    {
                        id: 'sortDirection',

let propsSetBehindTheScenes: boolean = false;
    let filterPaneFields = new Array();

    let choicesPaneFields: Array = [
      PropertyPaneDropdown('choiceType', {
        label: "Source",
        options: [
          {key:'custom', text:'Custom'},
          {key:'list', text:'List/Library'},
        ]
      })
    ];

    if(this.properties.choiceType === 'custom') {
      choicesPaneFields.push(
        PropertyFieldCollectionData('customChoices', {
          key: 'customChoices',
          label: 'Custom Choices',
          panelHeader: 'Custom Choices',
          manageBtnLabel: 'Manage Choices',
          value: this.properties.customChoices,
          fields: [
            {
              id: 'key',
              title: 'Key',
              type: CustomCollectionFieldType.string,
              required: true
            },
            {
              id: 'text',
              title: 'Text',
              type: CustomCollectionFieldType.string,