Overlay SVG animation on top of another SVG - html

Question

I am trying to make a loading screen for my React app but without the high-CPU load of SVG animations. I came across this article about splitting the static and animated assets into separate SVGs for a performance gain. My app uses MUI but I want the spinner to be loaded before MUI loads to avoid a blank screen, so it must be in JSX only.
I've tried everything I can think of the make it work but can't get the animated SVG to align over the top of the static SVG to create the spinning effect.
function StyledProgress({ message }) {
return (
<div className="progress-backdrop">
<svg
style={{ position: "absolute" }}
width="48px"
height="48px"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid"
>
<circle
cx="50"
cy="50"
fill="none"
stroke="#bdbdbd"
stroke-width="8"
r="36"
stroke-dasharray="169.64600329384882 58.548667764616276"
></circle>
</svg>
<svg
style={{ position: "relative" }}
width="48px"
height="48px"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid"
>
<animateTransform
attributeName="transform"
type="rotate"
repeatCount="indefinite"
dur="0.9900990099009901s"
values="0 50 50;360 50 50"
keyTimes="0;1"
></animateTransform>
</svg>
<span className="progress-text">{message ? message : "Loading"}</span>
</div>
);
}
What I'm aiming to replicate in JSX:
Stackblitz - MUI Progress
What I've tried:
Stackblitz - my HTML/CSS attempt
Reference article:
https://fjorgedigital.com/insights/blog/can-svg-animations-use-less-cpu/