svg animation doesn't work as expected with animateMotion - html

Question

I have a svg with 4 circles animating in it. The problem is sometimes 3 of them are perfectly animated but one of them is stuck at (0,0) and not moving.
<circle stroke="#4583FE" strokeWidth={2} fill="white" r={40}>
<animateMotion
path={path}
dur="3s"
repeatCount="indefinite"
keyTimes="0;0.5;1"
keyPoints={width > 600 ? "0.195;0.205;0.195" : "0;0.01;0.0"}
calcMode="spline"
keySplines="0.25, 0.1, 0.25, 1.0; 0.25, 0.1, 0.25, 1.0"
/>
</circle>
<circle stroke="#4583FE" strokeWidth={2} fill="white" r={40}>
<animateMotion
path={path}
dur="4s"
repeatCount="indefinite"
keyTimes="0;0.5;1"
keyPoints={width > 600 ? "0.39;0.41;0.39" : "0.3;0.31;0.3"}
calcMode="spline"
keySplines="0.25, 0.1, 0.25, 1.0; 0.25, 0.1, 0.25, 1.0"
/>
</circle>
<circle stroke="#4583FE" strokeWidth={2} fill="white" r={40}>
<animateMotion
path={path}
dur="9s"
repeatCount="indefinite"
keyTimes="0;0.4;1"
keyPoints={width > 600 ? "0.59;0.62;0.59" : "0.5;0.52;0.5"}
calcMode="spline"
keySplines="0.25, 0.1, 0.25, 1.0; 0.25, 0.1, 0.25, 1.0"
/>
</circle>
<circle stroke="#4583FE" strokeWidth={2} fill="white" r={40}>
<animateMotion
path={path}
dur="7s"
repeatCount="indefinite"
keyTimes="0;0.4;1"
keyPoints="0.79;0.81;0.79"
calcMode="spline"
keySplines="0.25, 0.1, 0.25, 1.0; 0.25, 0.1, 0.25, 1.0"
/>
</circle>
preview (top left circle is stuck and half-visible)
I'm using react and I render path every time states change. I want the circle to be animated at rightmost position with the blue text. I used same animation for that text and it works but circle is not animating.
I found other topics like this but answer is old.
I use Chrome