React-Spinners MoonLoader not spinning when centered

Question

Sandbox: https://playcode.io/1745382 . Wait for the sandbox to load so a white spinner shows up (not spinning).

I'm using the react-spinners MoonLoader which spins correctly if placed by default in a given location as

import { MoonLoader } from 'react-spinners';

<MoonLoader title="Loading data. Please wait." color={"#056492"} loading={isLoading} size={40} />

I need to center it in the center of the screen. The accepted solution given in the React-Spinners GutHub thread for this is

{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }

This does put the MoonLoader in the center, but the spinning stops, and it no longer spins. So the centering broke the spinning.

<MoonLoader title="Loading data. Please wait." color={"#056492"} loading={isLoading} size={40} 
            style = {{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }} />

This spinner has a parent SPAN with 2 child SPANs. I see in DevTools that the 1st child SPAN, the small blue dot, keeps oscillating in the same region in the upper-left corner, whereas without the centering CSS, it oscillates around the whole circle as it should. The same-region oscillation when centered is:

<span style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" title="Loading data. Please wait.">
    <span style="width:5.714285714285714px;height:5.714285714285714px;border-radius:100%;background-color:#056492;opacity:0.8;position:absolute;top:17.142857142857142px;animation:react-spinners-MoonLoader-moon 0.6s 0s infinite linear;animation-fill-mode:forwards"></span>
    <span style="width:40px;height:40px;border-radius:100%;border:5.714285714285714px solid #056492;opacity:0.1;box-sizing:content-box;position:absolute"></span></span>

Now, in comparison, the full-range spinning non-centered MoonLoader is

<span style="position: relative; display: inherit; width: 51.4286px; height: 51.4286px; animation: 0.6s linear 0s infinite normal forwards running react-spinners-MoonLoader-moon;" title="Loading data. Please wait.">
      <span style="width:5.714285714285714px;height:5.714285714285714px;border-radius:100%;background-color:#056492;opacity:0.8;position:absolute;top:17.142857142857142px;animation:react-spinners-MoonLoader-moon 0.6s 0s infinite linear;animation-fill-mode:forwards"></span>
      <span style="width:40px;height:40px;border-radius:100%;border:5.714285714285714px solid #056492;opacity:0.1;box-sizing:content-box;position:absolute"></span></span>