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

  const animate = useCallback(() => {
    // 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 >= current.max && current.direction === 1) ||
        (current.value <= current.min && current.direction === -1)
      ) {
        data.direction *= -1;
      }

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

      return data;
    });
  }, []);

  usePixiTicker(animate);

  return data.value;
}
Implements `react-pixi-fiber`'s `usePixiTicker` hook, and the `useState` hook.
Handles animation of the circle and square background.