How to use use-elapsed-time - 2 common examples

const [pathTotalLength, setPathTotalLength] = useState(0);

  // useElapsedTime will make this component rerender on every frame.
  // We memo all props that need to be computed to avoid doing that on every render 
  const path = useMemo(() => getPath(size, strokeWidth), [size, strokeWidth]);
  const durationMilliseconds = useMemo(() => durationSeconds * 1000, [durationSeconds]);
  const startAt = useMemo(() => startAtSeconds * 1000, [startAtSeconds]);
  const normalizedColors = useMemo(() => getNormalizedColors(colors, durationMilliseconds, isLinearGradient), [colors, durationMilliseconds, isLinearGradient]);
  const gradientId = useMemo(() => getGradientId(isLinearGradient, gradientUniqueKey), [isLinearGradient, gradientUniqueKey]);

  useEffect(() => {
    const totalLength = getPathTotalLength(pathRef.current);
    setPathTotalLength(totalLength);
  }, []);

  const elapsedTime = useElapsedTime(isPlaying, { durationMilliseconds, onComplete, startAt });
  const strokeDashoffset = linearEase(elapsedTime, 0, pathTotalLength, durationMilliseconds).toFixed(2);
  const stroke = getStroke(normalizedColors, elapsedTime);
  const remainingTime = Math.ceil((durationMilliseconds - elapsedTime) / 1000);

  return (
    <div aria-label="{ariaLabel}" style="{getWrapperStyle(size)}">
      <svg xmlns="http://www.w3.org/2000/svg" style="{svgStyle}" height="{size}" width="{size}">
        {isLinearGradient &amp;&amp; (
          <defs>
            <linearGradient y2="0%" x2="0%" y1="0%" x1="100%" id="{gradientId}">
              {normalizedColors.map(color =&gt; <stop></stop>)}
            </linearGradient>
          </defs></svg></div>

const useCountUp = (isCounting = false, config = {}) => {
	const {
		start,
		end,
		duration,
		easing,
		formatter,
		onComplete
	} = { ...defaultConfig, ...config };

	const hasDuration = typeof duration === 'number';
	const durationMilliseconds = hasDuration ? duration * 1000 : undefined;
	const elapsedTime = useElapsedTime(isCounting, { durationMilliseconds, onComplete });

	if (typeof end === 'undefined' || !hasDuration || typeof easing !== 'function') {
		return getReturnValue(formatter, elapsedTime);
	}

	const value = easing(elapsedTime, start, end - start, durationMilliseconds);
	return getReturnValue(formatter, value);
};