Проблема с transformOrigin в @react-spring/native

Я застрял на моменте смещения с поворотом - почему-то не работает transformOrigin, как мне кажется. Ниже приведён код:

import {Button, Text, View} from 'react-native';
import {useSpring, animated, easings, useSpringValue} from '@react-spring/native';
import {Svg, Circle} from 'react-native-svg';

const AnimatedCircle = animated(Circle);
const AnimatedText = animated(Text);

export default function App() {
    const [rotate, rotateApi] = useSpring(() => ({
        rotate: '0deg',
        transformOrigin: '50% 50%',
        config: {
            duration: 1000,
            easing: easings.linear,
        },
    }), []);

    const [line2, apiLine2] = useSpring(() => ({
        x: 75,
        y: 75,
        transformOrigin: '50% 50%',
        loop: true,
        config: {
            duration: 1000,
            easing: easings.linear
        }
    }), []);

    const handleClick = () => {
        rotateApi.start({
            from: {
                rotate: '0deg',
                transformOrigin: '50% 50%',
            },
            to: {
                rotate: '360deg',
                transformOrigin: '50% 50%',
            },
            // loop: true,
        });
        apiLine2.start({
            from: {
                x: 75,
                y: 75,
                transformOrigin: '50% 50%',
            },
            to: {
                x: 105,
                y: 75,
                transformOrigin: '50% 50%',
            },
        });
    }

    return (
        <View>
            <Svg style={[{width: '150px', height: '150px'}]} viewBox={'0 0 150 150'}>
                <AnimatedCircle x='75' y='75' r='30' fill='none' stroke='rgb(185, 64, 188)' strokeWidth='20' strokeDasharray='40.4, 19.4, 48.6, 20, 40, 20'
                    style={{
                        transform: [{rotate: rotate.rotate}],
                    }}/>
                <AnimatedCircle x={105} y={105} r='30' fill='none' stroke='rgb(121, 36, 122)' strokeWidth='20' strokeDasharray='0, 168.4, 20, 0'
                    style={{
                        transform: [{rotate: rotate.rotate}],
                        transformOrigin: '50% 50%',
                    }}/>
            </Svg>
            <Button title={'Animate'} onPress={handleClick} />
        </View>
    );
}

Я попытался загрузить этот код в Expo Go Snack, но не получилось - не знаю, как запустить, изучаю всего пару дней.

Оригинальная анимация на SCSS

.loader .line-2 {
    cx: $size;
    cy: $size;
    r: $radius;
    fill: none;
    stroke: rgb(121, 36, 122);
    stroke-width: $stroke-size;
    stroke-dasharray: 0, 168.4, 20, 0;
    animation: resizeRightSide $pieces-duration linear infinite, rotate $pieces-rotation-duration linear infinite $pieces-rotation-delay;
    transform-origin: 50% 50%;
}

Если закомментировать трансформацию, получается примерно тот же эффект, что я наблюдаю в React Native. Я понимаю, что эффект возникает из-за смещения элемента по x и y, и мне нужен результат, как в фидле - чтобы элемент смещался и вращался по большему радиусу. Возможно, здесь требуется другой подход.