react-spring Wrapped Component Not Working

Question

I'm trying to create a custom wrapped component with react-spring, based on this example. When hitting the button, the component should animate val from 0-100, but nothing happens. Typescript is giving me error:

Type '{ interpolate: InterpolationChain<unknown>; getValue: () => unknown; }' is not assignable to type 'number'.  TS2322

What's the correct way of using animated so we can animate some arbitrary prop val?

Sandbox

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";
import ReactDOM from "react-dom";

const ExampleFunctionalComponent = ({ val }: { val: number }) => (
  <div>{val}</div>
);
const AnimatedFunctionalComponent = animated(ExampleFunctionalComponent);

const App = () => {
  const [targetVal, setTargetVal] = useState(0);
  const props = useSpring({ val: targetVal });
  return (
    <div className="App">
      <h1>Animate parameter from 0 to 100</h1>
      Functional component (wrapped with animated):
      <AnimatedFunctionalComponent val={props.val} />
      <button
        onClick={(e) => {
          console.log("clicked button");
          setTargetVal(100);
        }}
      >
        Animate!
      </button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);