How to integrate react font awesome icon picker in PropertyFieldCollectionData control in SPFx?

Question

I have created SharePoint Framework web part in SharePoint online. I have integrated PropertyFieldCollectionData in that web part. Below is the link for the same,

https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData/

Now, I need to integrate React Font Awesome Icon Picker into PropertyFieldCollectionData control. Below is the link for the same,

https://github.com/DATechnologies/react-fa-icon-picker#readme

I have successfully integrated my SPfx web part. I can select an icon from the icon picker but it is not reflected in the SharePoint page PropertyFieldCollectionData. Below is my code snippet,

 PropertyFieldCollectionData("myCollectionData", {
                  key: "myCollectionData",
                  value: this.properties.myCollectionData,
                  fields: [
 {
                      id: "Icon",
                      title: "Icon (fontawesome)",
                      type: CustomCollectionFieldType.custom,
                      required: true,
                      onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
                        return (
                          React.createElement(IconPicker, { key: itemId, value: item.customFieldId, onChange: (e) => { value = e, item.customFieldId = e, onUpdate(value, e); } })
                        );
                  ]
}

Can anyone help me with the same?

Thanks