I'm trying to interpolate and SVG animation in react native, but some how I got NaN.

I'm receive NaN Error.

Here is all the code:

import React, { Component } from "react";
import Svg, { Path, } from "react-native-svg";
import { interpolatePath } from "d3-interpolate-path";
import { Animated, Modal } from "react-native";

const startPath = "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z";
const endPath = "M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z";

export default class Animations extends Component {
    state = {
        animation: new Animated.Value(0),
    };
    private _path: any;
    componentDidMount() {
        const pathInterpolate = interpolatePath(startPath, endPath);

        this.state.animation.addListener(({ value }) => {
            const path = pathInterpolate(value);
            this._path.setNativeProps({
                d: path,
            });
        });

        Animated.loop(Animated.sequence(
            [Animated.timing(this.state.animation,
                {
                    toValue: 1,
                    duration: 500,
                    useNativeDriver: false
                }),
            Animated.timing(this.state.animation,
                {
                    toValue: 0,
                    duration: 500,
                    useNativeDriver: false
                }),
            ]
        )).start()
    }
    render() {
        return (
            <Modal transparent={true}>
                <Animated.View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.5)", alignItems: "center", justifyContent: "center" }}>
                    <Svg width={150} height={150} fill="#000000">
                        <Path
                            d={startPath}
                            stroke="black"
                            ref={(path) => (this._path = path)}
                        />
                    </Svg>
                </Animated.View>
            </Modal>
        );
    }
}

Some of the interpolated paths are like: "M8.9,6.45L5.9,8.45L5.905,5.45cNaN,NaN,NaN,NaN,3.89,4.005cNaN,NaN,NaN,NaN,-1.1099999999999999,2h4.105h1.105h7.105cNaN,NaN,1.5,NaN,-1.5,NaNcNaN,NaN,1.495,NaN,-1.505,NaNcNaN,NaN,10.805,8,10.155,8.955cNaN,NaN,NaN,NaN,NaN,NaNh7.9h-1.1h1.9c5.06,8.345,5.88,8.96,6.84,9.165c0.06,11.095,0.88,11.71,1.84,11.915V10.5V8.75V12.5hNaNh1.5v-1.075v0.675cNaN,NaN,NaN,NaN,NaN,NaN"

What do I do?