How to use SVG markers with <rect> elements?

Question

According to MDN Web Docs markers can be used with rectangle elements. However, when I try to do that and attach my wavy line at the start of a rect, it doesn't work. So my question is whether it's possible to use markers on rectangles or do I do anything wrong? Here is my example:

export async function drawRect<T extends SVGGraphicsElement>(
  parent: D3Selection<T>,
  node: Node,
  options: RectOptions
) {
   ///some other code 
   ////

    rect = shapeSvg.insert('rect', ':first-child');

    rect
      .attr('class', 'basic label-container')
      .attr('style', nodeStyles)
      .attr('x', x)
      .attr('y', y)
      .attr('width', totalWidth)
      .attr('height', totalHeight)
      .attr('marker-start', 'url(#sequencenumber)');
}

export const insertSequenceNumber = function (elem) {
  elem
    .append('defs')
    .append('marker')
    .attr('id', 'sequencenumber')
    .attr('refX', 0)
    .attr('refY', 0)
    .attr('markerWidth', 20)
    .attr('markerHeight', 60)
    .attr('orient', 'auto')
    .attr('overflow', 'visible')
    .append('path')
    .attr('d', 'M0,5 Q5,9 10,5 T20,5')
    .attr('stroke', 'black')
    .attr('stroke-width', 1.2)
    .attr('fill', 'none');
};