Grouping and centering svg's with react - reactjs

Question

I am trying to create a progress indicator of sorts to show where in a process someone is inside a react application. The end result should look something like this:
To do this I am starting by creating a component for the circle with step number and label below it using svg's but my problem is that I can't figure out how to center the label text without it being clipped. Here is my code:
import React from 'react';
import colors from '../../stylesheets/colors';
const ProgressNode = (props) => {
const {
width = 4,
radius = 60,
color = colors.DISABLED,
text = '1',
textColor = colors.DISABLED,
fontSize = radius - 5,
label = 'Confirm Location',
} = props;
// subtract stroke width from radius to avoid clipping
const r = radius - (width * 2);
return (
<div style={{ margin: 100, border:'2px solid red'}}>
<svg
height={radius * 4}
width={radius * 4}
>
<svg
height={radius * 2}
width={radius * 2}
cx={radius}
cy={radius}
>
<circle
fill="transparent"
strokeWidth={width}
r={r}
cx={radius}
cy={radius}
stroke={color}
/>
<text
x="50%"
y="50%"
textAnchor="middle"
stroke={textColor}
strokeWidth={width - 1}
fontSize={fontSize}
fill={textColor}
// dy=".3em"
>
<tspan x="50%" dy=".3em">{text}</tspan>
<tspan x="50%" dy="1.8em">{label}</tspan>
</text>
</svg>
</svg>
</div>
);
};
export default ProgressNode;
The problem is that the label text is being clipped
Does anyone know how I can center the label text under the circle and if you have any ideas how to arrange the nodes and lines that would be a bonus :)