Свойство Framer Motion pathLength не работает

Сегодня я столкнулся со странной проблемой с Framer Motion.

По какой-то причине этот фрагмент (скопированный и вставленный с их веб-сайта) не работает, анимируется только прозрачность

import React from "react";
import { motion } from "framer-motion";

const icon = {
    hidden: {
        pathLength: 0,
        fill: "rgba(255, 255, 255, 0)"
    },
    visible: {
        pathLength: 1,
        fill: "rgba(255, 255, 255, 1)",
        transition: { duration: 4 }
    }
};

const SVGComponent = props => {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <motion.path
                d="M0 100V0l50 50 50-50v100L75 75l-25 25-25-25z"
                variants={icon}
                initial="hidden"
                animate="visible"
            />
        </svg>
    );
};

export default SVGComponent;

Надеюсь, вы, ребята, сможете помочь, заранее спасибо!