react-spring svg dashoffset doesn't animate in safari

Question

My react-spring svg animation doesn't work in Safari

I'm using react hooks and the react-spring animation library and my code works in Chrome and Firefox but not in Safari.

 const [timerCircumference, setTimerCircumference] = useState(0);
  // computes the percentage of time left
  const animator = useSpring({
    to: { pathLength: timerCircumference },
    config: { duration: 5000 },
    from: { pathLength: 0 }
  });

  const measuredRef = useCallback(
    node => {
      if (node !== null) {
        setTimerCircumference(node.getTotalLength());
        console.dir(node);
        console.log(`node length: ${node.getTotalLength()}`);
      }
    },
    []
  );
  return (
    <svg
      viewBox={`0 0 512 512`}
      role="img"
      className="svg-inline--fa fa-circle fa-w-16 white"
      focusable="false"
      aria-hidden="true"
      data-icon="circle"
      data-prefix="fal"
    >
      <g transform="translate(256 256)">
        <animated.circle
          r={`${232}`}
          fill="none"
          strokeWidth="18"
          stroke="currentColor"
          ref={measuredRef}
          strokeDashoffset={animator.pathLength}
          strokeDasharray={timerCircumference}
        />
      </g>
    </svg>
  );

The strokeDashoffset value is supposed to animate but it doesn't The logs to the console in the useCallback block show that when the DOM node is measured with getTotalLength(), the value is initially 0 in Safari unlike Chrome and Firefox but returns the proper value when the component unmounts.