[Bug]: Custom Link through extending dia.link not working with ports

[MeAriJit]

What happened?

I am creating custom links extending dia.link in jointjs 3.6.5
export default class Link extends dia.Link {}

But when I try to connect to source and target ports like
let l1 = new Link({
source: { id: r1, port: "out1" },
target: { id: r4, port: "p1" },
z: 3
});

The result is not as needed. I refer to your trial app demos apps.
codesandbox Link:
https://codesandbox.io/s/jointjsports-x1euo5?file=/src/index.js:5735-5835

N.B:
same code is working If I choose jointjs 3.7.1 in codesandbox

Version

3.6.5

What browsers are you seeing the problem on?

Chrome

What operating system are you seeing the problem on?

Linux