How to use the react-pixi-fiber.usePixiTicker function in react-pixi-fiber

function useAnimatedValue({ direction, max, min, value }) {
  const [data, setData] = useState({
    direction,
    value,
  });

  usePixiTicker(() => {
    // perform all the logic inside setData so useEffect's dependency array
    // can be empty so it will only trigger one on initial render and not
    // add and remove from ticker constantly.
    setData(current => {
      const data = { ...current };

      // flip direction once min or max has been reached.
      if ((current.value >= max && current.direction === 1) || (current.value <= min && current.direction === -1)) {
        data.direction *= -1;
      }

      // increment or decrement `
      data.value += data.direction;

      return data;
    });