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:


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, {
  created: [connection],

Thanks in advance!

Does anyone know how to fix this?