Connection Preview layout not optimal

Connetion Preview not optimal

I am implementing a preview functionality of a created connection. In this case, I create a message flow (MF) between two flow nodes. However, the preview of the MF starts in the middle of each flow-node:

image

When I finally created the MF (modeling.connect(...)), it is shown as expected.

How can I create a correct preview?
My current code is the following, where source and target are the flow nodes shown above.

const connection = elementFactory.createConnection({
  type: "bpmn:MessageFlow",
});
connection.waypoints = layouter.layoutConnection(connection, {
  source,
  target,
});
complexPreview.create({
  created: [connection],
});

Thanks in advance!

Does anyone know how to fix this?