D3.js Adding hyperlinks to svg text not working still drawing extra unlinked text bug

Hi I am trying to make plain text labels in D3 into hyperlinks. I was able to add the links using append(‘a’) and xlink:href however there is still the extra plain text being drawn too and I cannot find a solution to remove the extra text that are not links

Here is my code for drawing axis labels:

              svg.append('g')
                .attr('transform', tickTransform)
                .call(d3.axisRight(y))
                .selectAll('.tick text')
                .attr('class', 'axis-labels')
                .append('a')
                .attr("xlink:href", "http://en.wikipedia.org/wiki/")
                .attr('class', 'axis-links')
                .attr('tabindex', 0)
                .attr('aria-describedby', (d) => `label text-${d}`)
                .style("font-family", 'Source Sans Pro')
                .text((d) => textWrap(d));

The resulting HTML looks like this:

<text fill="#000" x="9" dy="0.32em" class="axis-labels">
Label link -problem line
<a xlink:href="http://en.wikipedia.org/wiki/" class="axis-links" tabindex="0" aria-describedby="label text-Label link" style="fill: rgb(85, 85, 85); font-family: &quot;Source Sans Pro&quot;;">Label link</a>
</text>

I have indicated the problem line which is the extra text being added since the already creates the label text i do not want that extra problem line.image of UI showing resulting HTML