title: Number showing as NaN
body: <p>I'm using react-spring to make a component which counts from zero (0) to ten (10) over a 10 second duration:</p>
  
  <pre><code>export default function Counter() {
      const props = useSpring({
          from: { number: 0 },
          to: { number: 10 },
          config: {
              duration: 10000
          } 
      });
  
      return (
          &lt;animated.h1&gt;
             {props.number}
          &lt;/animated.h1&gt;
      )
  }
  </code></pre>
  
  <p>This results in a large floating point number that counts upward when it renders. I now just want to just show the integer value instead of the floating point.</p>
  
  <p>Using:</p>
  
  <pre><code>&lt;animated.h1&gt;
     {props.number.toFixed()}
  &lt;/animated.h1&gt;
  </code></pre>
  
  <p>Yields: <code>TypeError: props.number.toFixed is not a function</code></p>
  
  <p>Using:</p>
  
  <pre><code>&lt;animated.h1&gt;
     {Number(props.number).toFixed()}
  &lt;/animated.h1&gt;
  </code></pre>
  
  <p>Renders 'NaN' where the Counter component is.</p>
  
  <p>Where am I going wrong? Thanks in advance!</p>