text.annotation-note-label overlaps text.annotation-note-title (rather than offsetting)

[kortina]

Hi, tx for making this great library. It seems fairly straightforward to use, but I am having an issue trying to follow the basic examples where the text.annotation-note-label just renders in the same position as text.annotation-note-title (rather than below it on the y-axis as show in the example).

Here is the full code:

https://observablehq.com/@kortina/wall-st-vs-main-st

And relevant snippet:

const annotations = [
    {
    note: { title: "2008 Financial Crisis", label: "Unemploymentꜛ  S&P500 ꜜ" },
    x: x(new Date(2008, 4)), 
    y: yLeft(0.09),
    dy: 100,
    dx: -150
  },
  {
    note: { title: "COVID-19" },
    x: x(new Date(2020, 2)), 
    y: yLeft(0.07),
    dy: 50,
    dx: -150
  }
]

const makeAnnotations = d3.annotation()
  .editMode(false)
  .notePadding(0)
  .type(d3.annotationCalloutCircle)
  .annotations(annotations)
  
  svg
  .append("g")
  .attr("class", "annotation-group")
  .attr("clip-path", clipId) // uncomment to animate annotation
  .call(makeAnnotations)
  

}

Am I doing something silly here? Or do I need to add some extra custom css to get the label to offset by the correct y amount to render below the title?