How to change color of text underline in svg text element?

Question

<text
    x={width / 2}
    y={0}
    fill={fontColor}
    fontSize={30}
    fontWeight={700}
    textAnchor='middle'
    textDecoration='underline'
{titleText}</text>

We have an that includes a element that is underlined, and we'd like to change the color of the underline. This doesn't seem easy? There is no textDecorationColor with SVG as there is in CSS for HTML. Any recommendations?

Although beggers cannot be choosers, calculating width of the text to use in a line element rendered below the text, or using an HTML ForeignObject, both seem suboptimal.

Edit - perhaps a duplicate, Text decoration of a text svg in html, with foreignObject the proposed solution in this other posting. I will likely go with this route.