How to connect a Custom element and a DataObject using Data In/Output Association in bpmn-js

Hello,
I have created a Custom element by using DataObjectReference as a superclass, and I want to enable connections between this element and DataObjectReference using DataInputAssociation and DataOutputAssociation.
Using Custom Rules, I managed to make the Data In/Output Association appear when the mouse hovers over the DataObject. However, when I try to click and create the association, the following error occurs. How can I resolve this?


EventBus.js:384 unhandled error in event listener
TypeError: Cannot read properties of undefined (reading ‘push’)
at BpmnUpdater.updateSemanticParent (BpmnUpdater.js:609:14)

My Code --------------------------------------------------------------------------------------------------

*** model.json

export default {
name: “CustomElements”,
uri: “http://example.com/custom”,
prefix: “custom”,
types: [
{
name: “StakeholderObject”,
superClass: [“bpmn:DataObjectReference”],
properties: [
{
name: “customAttribute”,
isAttr: true,
type: “String”
}
]
},
{
name: “MilestoneEvent”,
superClass: [“bpmn:IntermediateThrowEvent”],
properties: [
{
name: “customAttribute”,
isAttr: true,
type: “String”
}
]
}

]

};

*** Custom Rule Definition

StakeholderRules.prototype.init = function () {
this.addRule(‘connection.create’, 1500, function(context) {

const source = context.source;
const target = context.target;

if (source.type === 'custom:StakeholderObject' && isAny(target,['bpmn:DataObjectReference']) ) {
    return { type: 'bpmn:DataOutputAssociation', source:source, target: target};
  }
});

};

*** Factory Definition
import inherits from ‘inherits’;
import BpmnElementFactory from ‘bpmn-js/lib/features/modeling/ElementFactory’;

function StakeholderElementFactory(bpmnFactory, moddle, translate) {
BpmnElementFactory.call(this, bpmnFactory, moddle, translate);

const createCustomElement = (type, attrs) => {
return this._bpmnFactory.create(type, attrs);
};

this.create = function(elementType, attrs) {
var type = attrs.type;

if (elementType === 'bpmn:DataOutputAssociation')
{
  if (attrs.sourceRef && attrs.sourceRef.type === 'custom:StakeholderObject')
  {

  }
}

if (elementType === 'custom:StakeholderObject') {
  // add width and height if shape
  if (!/:connection$/.test(type)) {
    assign(attrs, self._getCustomElementSize(type));
  }

  return createCustomElement('bpmn:DataObjectReference', {
    ...attrs,
    type: 'custom:StakeholderObject',
    customAttribute: 'customValue',
    width : 36,
    height: 36  
  });
}
return BpmnElementFactory.prototype.create.call(this, elementType, attrs);

};
}

StakeholderElementFactory.prototype._getCustomElementSize = function(type) {
var shapes = {
__default: { width: 36, height: 36 },
‘custom:StakeholderObject’: { width: 36, height: 36 }
};

return shapes[type] || shapes.__default;
};

inherits(StakeholderElementFactory, BpmnElementFactory);

export default StakeholderElementFactory;

Solved it !!!
I just added below lines into properties of StakeholderObject in model.json.

{
“name”: “dataOutputAssociations”,
“isMany”: true,
“type”: “bpmn:DataOutputAssociation”
}