Как анимировать свойство градиентТрансформировать с помощью response-native-svg и Animated

Question

Как анимировать свойство GrainTransform в react-native-svg с помощью Animated?

    import React, { useEffect, useState } from 'react'
    import { Dimensions, Animated } from 'react-native'

    import Svg, {
      Path,
      Defs,
      LinearGradient,
      Stop,
      Circle,
      Ellipse,
      G,
      Rect,
      ClipPath,
      AnimateTransform
    } from 'react-native-svg'

    const { width } = Dimensions.get('window')

    export const HomeBg = () => {
      const [rotateValue, setRotateValue] = useState(new Animated.Value(0))
      useEffect(() => {
        StartImageRotate()
      }, [])

      function StartImageRotate() {
        rotateValue.setValue(0)

        Animated.timing(rotateValue, {
          toValue: 360,
          duration: 3000,
          useNativeDriver: true
        }).start(() => StartImageRotate())
      }

      const RotateData = rotateValue.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 360]
      })

      const AnimatedLinearGradient = Animated.createAnimatedComponent(
        LinearGradient
      )

      return (
        <Svg width={width} height="300" viewBox="0 0 377 246">
          <Defs>
            <ClipPath id="clip-path">
              <Rect width="377" height="246" fill="none" />
            </ClipPath>
            <ClipPath id="clip-path-2">
              <Path
                d="M260.89-439.51a547.51,547.51,0,0,0-72.39,4.77,547.51,547.51,0,0,0-72.39-4.77c-239.17,0-433.06,153.45-433.06,342.75S-123.06,246,116.11,246a549.21,549.21,0,0,0,72.39-4.77A549.21,549.21,0,0,0,260.89,246C500.06,246,694,92.54,694-96.76S500.06-439.51,260.89-439.51Z"
                fill="none"
              />  
            </ClipPath>  
            <LinearGradient  
              id="linear-gradient"  
              x1="119.9"  
              y1="-433.19"  
              x2="443.02"  
              y2="337.84"  
              gradientUnits="userSpaceOnUse"  
            >  
              <Stop offset="0" stopColor="#0060ae" />  
              <Stop offset="0.36" stopColor="#314aa0" />  
              <Stop offset="1" stopColor="#ec1c24" />  
            </LinearGradient>  
            <LinearGradient  
              id="linear-gradient-2"  
              x1="150.21"  
              y1="267.76"  
              x2="60.47"  
              y2="-691.5"  
              gradientUnits="userSpaceOnUse"  
            >  
              <Stop offset="0" stopColor="#0060ae" />  
              <Stop offset="0.36" stopColor="#314aa0" />  
              <Stop offset="0.85" stopColor="#e01f2c" />  
            </LinearGradient>  
            <LinearGradient  
              id="linear-gradient-3"  
              x1="69.29"  
              y1="258.45"  
              x2="163.05"  
              y2="-452.91"  
              gradientUnits="userSpaceOnUse"  
            >  
              <Stop offset="0" stopColor="#0060ae" />  
              <Stop offset="0.36" stopColor="#314aa0" />  
              <Stop offset="0.8" stopColor="#e01f2c" />  
              <Stop offset="0.9" stopColor="#ec1c24" />  
            </LinearGradient>  
            <AnimatedLinearGradient  
              id="linear-gradient-4"  
              x1="271.6"  
              y1="-66.75"  
              x2="395.68"  
              y2="281.01"  
              gradientUnits="userSpaceOnUse"  
              gradientTransform={`rotate(${RotateData})`}  
            >  
              <Stop offset="0" stopColor="#0060ae" />  
              <Stop offset="0.36" stopColor="#314aa0" />  
              <Stop offset="0.88" stopColor="#ec1c24" />  
            </AnimatedLinearGradient>  
          </Defs>  
          <G clip-path="url(#clip-path-2)">  
            <Ellipse  
              cx="260.89"  
              cy="-96.76"  
              rx="433.06"  
              ry="342.76"  
              fill="url(#linear-gradient)"  
            />  
            <Ellipse  
              cx="116.11"  
              cy="-96.76"  
              rx="433.06"  
              ry="342.76"  
              fill="url(#linear-gradient-2)"  
            />  
            <G opacity="0.5">  
              <Ellipse  
                cx="116.11"  
                cy="-96.76"  
                rx="433.06"  
                ry="342.76"  
                fill="url(#linear-gradient-3)"  
              />  
              <Ellipse. 
                cx="260.89". 
                cy="-96.76". 
                rx="433.06". 
                ry="342.76". 
                fill="url(#linear-gradient-4)". 
              />. 
            </G>. 
          </G>. 
        </Svg>. 
      ). 
    }. 

это выдает следующую ошибку: снимок экрана

LinearGradient получает [Object object], но ожидает массив чисел или строку.