Can’t animate path in SVG using react native

I’m trying to make a path inside an SVG rotate. I keep getting the error “undefined is not a function”. It seem to be caused by the declaration of animatedProps. The code is below:

import React, { forwardRef, useState, useRef } from 'react';
import {View} from 'react-native';
import { Svg, Path } from 'react-native-svg';
import Animated from 'react-native-reanimated';

const AnimatedPath = Animated.createAnimatedComponent(Path);

const Shape = forwardRef((props, ref) => {
  const [currentPath, setCurrentPath] = useState([]);
  const rotation = useRef(new Animated.Value(0)).current;

  const startRotation = () => {
    Animated.loop(
      Animated.timing(rotation, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      })
    ).start();
  };

  const animatedProps = Animated.useAnimatedProps(() => {
    const rotate = `rotate(${rotation.value * 360}, 0, 0)`;
    return { transform: [{ rotate }] }
  });

  return (
    <View style={styles.container}>
      <Svg style={styles.svg} height="100%" width="100%">
        <AnimatedPath
          d={currentPath.join('')}
          stroke={props.colour}
          fill={'transparent'}
          strokeWidth={2}
          strokeLinejoin={'round'}
          strokeLinecap={'round'}
          animatedProps={animatedProps}
          onPress={() => { }}
        />
      </Svg>
    </View>
  );
});

Please note I have removed the code that creates the path to make the code more consise.