Animate <progress> element value

[clarityflowers]

Is there any way to animate the value property of a <progress> element? I've found a workaround with a MotionValue change event handler that manually updates the value like this (in React):

const [initialValue] = useState(value)
const animatedValue = useSpring(value, { bounce: 0, duration: 250 });
const ref = useRef<HTMLProgressElement>(null);
useMotionValueEvent(animatedValue, 'change', (v) => {
  if (ref.current) ref.current.value = v;
});
useEffect(
  () => {
    animatedValue.set(value);
  },
  [animatedValue, value]
);
return <progress ref={ref} value={initialValue} />

But I'm wondering why I can't just do <motion.progress animate={{value: value}}/>. And I suspect there may be issues with my workaround here that I'm not aware of.