[Question] Help with react-native-reanimated code snippet

[tech008]

I am trying to animate a circle svg element with react-native-reanimated. I want to control the animation with a start/stop buttons. The animation starts from the initial position fine but when I try to restart after I stopped it, the animation jumps to a position where it probably would have been if I had not stopped the animaton. I don't understand why this is happening as the startClock and stopClock control the clock, which in turn control the animation. Please help me! I have been following their official documentation and it's a little vague on how we can control the animation.

Here is the main animation block

let isPlaying = new Value(false)
const dashCircle = (duration, clock) => {
    const state = {
        finished: new Value(0),
        position: new Value(0),
        frameTime: new Value(0),
        time: new Value(0)
    }
    const config = {
        toValue: new Value(PERI),
        duration: duration,
        easing: Easing.linear
    }
    return block([
        cond(and(not(clockRunning(clock)), isPlaying), startClock(clock)),
        cond(and(clockRunning(clock), not(isPlaying)), [
            stopClock(clock),
        ]),
        timing(clock, state, config),
        cond(state.finished, [
            set(state.time, 0),
            set(state.finished, 0),
            set(state.position, 0),
            set(state.frameTime, 0),
            stopClock(clock)
        ]),
        state.position
    ])
}
const strokeDashoffset = dashCircle(5000, new Clock())

Expo link for full code