I want to change the color of the stroke when the animation is over

I'm using react and typescript.
The animation is implemented using motion.
I want to change the color of the stroke from red to white when the animation is over.
How can I detect when the animation is finished?

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

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

export const Example = () => (
  <div className="container" style={{ background: "blue" }}>
    <motion.svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      style={{
        stroke: "red",
        strokeWidth: 2,
        strokeLinejoin: "round",
        strokeLinecap: "round"
      }}
    >
      <motion.path
        d="M0 100V0l50 50 50-50v100L75 75l-25 25-25-25z"
        variants={icon}
        initial="hidden"
        animate="visible"
        transition={{
          default: { duration: 2, ease: "easeInOut" },
          fill: { duration: 2, ease: [1, 0, 0.8, 1] }
        }}
      />
    </motion.svg>
  </div>
);