Неправильное значение высоты, рассчитанное с использованием крючка useMeasure с React Spring

Question

Я пытаюсь использовать React Spring с API-интерфейсом ловушек для интерполяции ширины промежутка между его обычной отображаемой шириной и 0px.

В качестве основы для этого я использовал следующий пример: https://codesandbox.io/embed/lp80n9z7v9

useMeasure hook:

import React, { useState, useRef, useEffect } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

export default function useMeasure() {
  const ref = useRef();
  const [bounds, set] = useState({ left: 0, top: 0, width: 0, height: 0 });
  const [ro] = useState(
    () => new ResizeObserver(([entry]) => set(entry.contentRect))
  );
  useEffect(() => {
    if (ref.current) ro.observe(ref.current);
    return () => ro.disconnect();
  }, []);
  return [{ ref }, bounds];
}

Вот мой код компонента:

export default function MyComponent({
  hasChildren,
  icon,
  isOpen,
  title,
  url,
  visible
}) {
  const tabIndex = visible ? undefined : -1;
  const titleAttr = (isOpen && title) || undefined;
  const wrapperRef = useRef();
  const titleRef = useRef();
  const [bind, { width: viewWidth }] = useMeasure();

  const wrapperProps = useSpring({
    config: animationConfig,
    ref: wrapperRef,
    opacity: isOpen ? 0 : 1,
  });

  const titleProps = useSpring({
    ref: titleRef,
    width: isOpen ? 0 : viewWidth
  });

  // Chain animation order
  useChain([wrapperRef, titleRef]);

  return (
    <OuterComponent
      className="side-nav__nav-link"
      to={url}
      tabIndex={tabIndex}
      title={titleAttr}
    >
      {icon && (
        <img
          className="side-nav__nav-link__icon"
          src={`${process.env.PUBLIC_URL}${icon}`}
          alt=""
        />
      )}

      <animated.div
        className="wrapper"
        style={{
          opacity: wrapperProps.opacity
        }}
      >
        <animated.span
          style={{
            width: titleProps.width
         }}
        >
          <span className="title" {...bind}>
            {title}
          </span>
        </animated.span>
        {hasChildren && hasChildren.length > 0 && (
          <span className="icon" />
        )}
      </animated.div>
    </OuterComponent>
  );
}

Проблема в том, чтоУ меня есть то, что на первом рендере viewWidth рассчитывается как 0, а затем это устанавливается в качестве встроенного стиля, поэтому любые будущие измерения также будут 0.

Если вы удалите линию, где стильпередается во внутренний animated.span, тогда ширина вычисляется правильно (запись viewWidth в консоль).

Это не похоже на проблему в примере URL, который я разместил в начале этого поста.,Я не уверен, как обойти эту проблему.