React Native Reanimated + SVG + Custom Component Not Animating

Question

I am trying to create a custom svg component (a rocket) that I then turn into an animated component using reanimated, so that I can move the rocket across the screen!

Rocket:

    Rocket: class extends React.Component {
        render() {
            return <Path
                origin={[this.props.x, this.props.y]}
                rotation={this.props.rotation !== undefined ? this.props.rotation : 0}
                d={`
                    M ${this.props.x + this.props.length / 4} ${this.props.y + this.props.length / 4}
                    L ${this.props.x + this.props.length / 3} ${this.props.y + this.props.length / 2}
                    L ${this.props.x - this.props.length / 3} ${this.props.y + this.props.length / 2}
                    L ${this.props.x - this.props.length / 4} ${this.props.y + this.props.length / 4}
                    L ${this.props.x - this.props.length / 4} ${this.props.y - this.props.length / 4}
                    C ${this.props.x - this.props.length / 4} ${this.props.y - this.props.length * .575}, ${this.props.x + this.props.length / 4} ${this.props.y - this.props.length * .575}, ${this.props.x + this.props.length / 4} ${this.props.y - this.props.length / 4}
                    Z
                `}
                opacity={this.props.opacity !== undefined ? this.props.opacity : 1}
                fill='white'
            />;
        }
    },

Animated Rocket Component (wraps rocket):

Here I am using two props: data and t.

data: an object containing animation details (initial point, final point, initial time, final time)

t: A sharedValue that uses reanimated's withTiming() method to transition from 0 to 1000.

const _AnimatedRocket = createAnimatedComponent(Icons.Rocket); // reanimated component from svg rocket


    Rocket({ data, t }) {
        const duration = data.t2 - data.t1;
        if (duration == 0) return null;

        const animatedProps = useAnimatedProps(() => {
            return {
                opacity: t.value >= data.t1 && t.value <= data.t2 ? 1 : 0,
                x: interpolate(t.value, [data.t1, data.t2], [data.p1.x, data.p2.x]),
                y: interpolate(t.value, [data.t1, data.t2], [data.p1.y, data.p2.y]),
            }
        }, null, SVGAdapter);

        return <_AnimatedRocket animatedProps={animatedProps} />
    },

I am then driving the Animated Rocket Component in a master component that houses all animated components and drives them with a single t.

The result is that the rocket is shown in its inital position, and stays fixed for the duration of the animation.

I have replicated the results by creating animated components from the traditional svg components (Path, Line, Circle, G ...) and everything works, but as soon as I animate a custom component it no longer moves!