spring svg animation not sync

[claud-io]

Hello,
I'm trying to animate multiple svg components at the same time, but as looks like that the circle sometimes start his animation before the path or after it.
am i doing something wrong?

`import React, { useCallback } from 'react';
import { useSpring, animated as a } from 'react-spring'

const Timeline = ( ) => {

const base = 'M84,10 C107.940188,19.6773492 140.338779,21.1826905 181.195773,14.5160238 C242.481263,4.51602384 309.404616,-10.9950356'
const base2 = 'C428,43 478,46 614,26 C750,6 822,16.5555556 879,26.2777778 C936,36 1068,47 1144,26'

const [{ path1, path2, y, stroke, textFont, textPos }, setCircle] = useSpring(() => ({
    path1: 'M84,10 C107.940188,19.6773492 140.338779,21.1826905 181.195773,14.5160238 C242.481263,4.51602384 309.404616,-10.9950356  345,26',
    path2: 'M345,26 C428,43 478,46 614,26 C750,6 822,16.5555556 879,26.2777778 C936,36 1068,47 1144,26', y: 0,
    stroke: "#ffffff", config: { tension: 50, friction: 10 }, textFont: 12, textPos: 58
}))
const [{ dashed }, setDash] = useSpring(() => ({ dashed: 1, immediate: true, config: { tension: 500 } }))
const transformCircle = y.interpolate(y => `translate(0, ${y})`)
const dash = dashed.interpolate(d => d ? "1,5" : "0")

const onMove = useCallback(({ clientX: x, clientY: y, deltaX }) => {
    if (deltaX == 0) {
        setCircle({ y: 0, stroke: '#ffffff', textFont: 12, textPos: 58, path1: `${base} ${345},${26} `, path2: `M${345},${26} ${base2}  ` })
        setDash({ dashed: 1 })

    }
    else {
        var rect = document.getElementById('circle4').getBoundingClientRect();
        const cx = rect.x + rect.width / 2
        const cy = rect.y + rect.height / 2
        const d = Math.sqrt(Math.pow(cx - x, 2) + Math.pow(cy - y, 2))
        const minDist = 20
        const maxDist = 35
        if (d < minDist) {
            setDash({ dashed: 0 })
            setCircle({ y: -40, stroke: '#025F50', textFont: 16, textPos: 50, path1: `${base} ${345},${26 - 40} `, path2: `M${345},${26 - 40} ${base2}  ` })
        }
        if (d > maxDist) {
            setCircle({ y: 0, stroke: '#ffffff', textFont: 12, textPos: 58, path1: `${base} ${345},${26} `, path2: `M${345},${26} ${base2}  ` })
            setDash({ dashed: 1 })
        }

    }

}, [])

return (
    <div style={{ display: 'flex', justifyContent: 'center' }} onMouseMove={onMove} >

        <svg width="1204px" height="150px" viewBox="0 0 1204 70" version="1.1" >
            <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                <g transform="translate(-107.000000, -1558.000000)">
                    <g transform="translate(106.000000, 895.000000)">
                        <g transform="translate(0.000000, 663.000000)">
                            <a.text fontFamily="Helvetica" fontSize={textFont} fontWeight="normal" letterSpacing="0.7" fill="#025F50">
                                <a.tspan x="320.730078" y={textPos}>TEXT1 </a.tspan>
                                <tspan x="328.74707" y="72">TEXT2</tspan>
                            </a.text>
                            <a.path d={path1} id="path1" stroke="#025F50" strokeDasharray={dash}></a.path>
                            <a.path d={path2} id="path2" stroke="#025F50" strokeDasharray="1,5"></a.path>
                            <a.circle cx="349" cy="26" r="9" transform={transformCircle} id="circle4" stroke="#005E51" strokeWidth="2" fill="#FFFFFF" ></a.circle>
                            <a.circle id="Oval" stroke={stroke} transform={transformCircle} strokeWidth="2" fill="#FFFFFF" cx="349" cy="26" r="4"></a.circle>
                        </g>
                    </g>
                </g>
            </g>
        </svg>
    </div>
);

}

export default Timeline`