How to use the react-spring/hooks.useSpring function in react-spring

});
  const spring3 = useSpring({
    ratio: getValuesForBezierCurve(eagerCurve, ratio)[1],
    config: {
      tension: 75,
      friction: 10,
    },
  });
  const spring4 = useSpring({
    ratio: getValuesForBezierCurve(eagerCurve, ratio)[1] * 1.15,
    config: {
      tension: 260,
      friction: 35,
    },
  });
  const spring5 = useSpring({
    ratio: getValuesForBezierCurve(reticentCurve, ratio)[1],
    config: {
      tension: 225,
      friction: 12,
    },
  });

  const lineColors = [
    COLORS.red[500],
    COLORS.yellow[500],
    COLORS.green[500],
    COLORS.blue[300],
    COLORS.white,
  ];

  const lines = [

const AmplitudeVisualization = ({ value, size, padding = 6, isAnimated }) => {
  const innerSize = size - padding * 2;

  const spring = useSpring({
    value,
    config: {
      tension: 80,
      friction: 14,
    },
    immediate: !isAnimated,
  });

  return (
    
      <svg fill="none" height="{innerSize}" width="{innerSize}">
        
            calculatePathFromValue(v, innerSize)
          )}
          fill="none"</svg>

const BoilingSteam = ({ value, strength = 0.01, offset }: Props) => {
  const ratio = value / 100;

  const [isMidTransition, setIsMidTransition] = useState(false);

  const opacity = ratio;

  const spring = useSpring({
    config: SPRING_CONFIG,
    after: {
      style: 'border: 10px solid red',
    },
    sx: normalize(
      perlin2(value * 0.02, offset + 0.25) * strength,
      -1,
      1,
      0,
      32
    ),
    c1x: normalize(
      perlin2(value * 0.02, offset + 0.5) * strength,
      -1,
      1,
      8,

const LegoBrickVisualization = ({ value, size, isAnimated }) => {
  const spring = useSpring({
    ratio: value / 100,
    config: {
      tension: 80,
      friction: 14,
    },
    immediate: !isAnimated,
  });

  return (
    
      <svg viewBox="0 0 54 54" height="{size}" width="{size}">
        </svg>

const spring1 = useSpring({
    ratio: getValuesForBezierCurve(linearCurve, ratio)[1],
    config: {
      tension: 120,
      friction: 12,
    },
  });
  const spring2 = useSpring({
    ratio: getValuesForBezierCurve(linearCurve, ratio)[1] * 1.25,
    config: {
      tension: 150,
      friction: 10,
    },
  });
  const spring3 = useSpring({
    ratio: getValuesForBezierCurve(eagerCurve, ratio)[1],
    config: {
      tension: 75,
      friction: 10,
    },
  });
  const spring4 = useSpring({
    ratio: getValuesForBezierCurve(eagerCurve, ratio)[1] * 1.15,
    config: {
      tension: 260,
      friction: 35,
    },
  });
  const spring5 = useSpring({
    ratio: getValuesForBezierCurve(reticentCurve, ratio)[1],
    config: {

const PersonInflateVisualization = ({ value, size, isAnimated }) => {
  const headSpring = useSpring({
    translate: (value / 100) * -3,
    config: springConfig,
    immediate: !isAnimated,
  });
  const bodyRadius = useSpring({
    rx: normalize(value, 0, 100, 0.5, 8),
    ry: normalize(value, 0, 100, 5, 8.5),
    config: springConfig,
    immediate: !isAnimated,
  });

  const leftLegPoints = useSpring({
    x1: normalize(value, 0, 100, 13.5528, 11.5528),
    y1: 29.6584,
    x2: normalize(value, 0, 100, 17.6584, 15.6584),
    y2: 21.4472,
    config: springConfig,
    immediate: !isAnimated,
  });

  const rightLegPoints = useSpring({
    x1: normalize(value, 0, 100, 22.4472, 24.4472),
    y1: 29.6584,
    x2: normalize(value, 0, 100, 18.3416, 20.3416),
    y2: 21.4472,
    config: springConfig,
    immediate: !isAnimated,
  });

const BoilingWater = ({
  value,
  color,
  top,
  left,
  width,
  height,
  perlinRow,
  isAnimated,
}: Props) => {
  const boiledAwayOffset = value * 0.075;

  const ratio = value / 100;

  const spring = useSpring({
    config: SPRING_CONFIG,
    immediate: !isAnimated,
    sx: left,
    sy:
      normalize(
        perlin2(value * PERLIN_MULTIPLE, perlinRow),
        -1,
        1,
        top - 10 * ratio,
        top + 12 * ratio
      ) + boiledAwayOffset,
    c1x: normalize(
      perlin2(
        value * PERLIN_MULTIPLE + PERLIN_OFFSET_BETWEEN_POINTS,
        perlinRow * 10
      ),

isDisabled,
  numOfDoors = 2,
  clickDisabledCompartment,
  children,
}: Props) => {
  const iconButtonRef = useRef();

  const doorSpring = useSpring({
    offset: isDisabled ? 0 : 150,
    config: {
      stiffness: 10,
      friction: 40,
    },
  });

  const childSpring = useSpring({
    scale: isDisabled ? 0.9 : 1,
    opacity: isDisabled ? 1 : 0,
    config: {
      stiffness: 20,
      friction: 40,
    },
  });

  return (

let timeoutId;

    const update = () => {
      setValue(random(0, 100));

      timeoutId = window.setTimeout(update, random(500, 1000));
    };

    timeoutId = window.setTimeout(update, random(1000, 2500));

    return () => {
      window.clearTimeout(timeoutId);
    };
  }, []);

  const spring = useSpring({
    value,
  });

  return (
    <svg fill="none" viewBox="0 0 20 52" height="{height}" width="{width}">
      <rect fill="#2B2B2B" rx="4" height="52" width="16" x="2"></rect>
      <line stroke="#fff" y2="5" x2="14" y1="5" x1="6"></line>
      </svg>

export default function App() {
  const ref = useRef(null)
  const [{ st, xy }, set] = useSpring(() => ({ st: 0, xy: [0, 0] }))
  const interpBg = xy.interpolate(
    (x, y) =>
      `perspective(400px) rotateY(${x / 40}deg) rotateX(${-y /
        40}deg) translate3d(-50%, -50%, 0)`
  )
  const interpFace = st.interpolate(o => `translate(90,${105 + o / 4})`)
  const interpEye = interpolate(
    [st, xy],
    (o, xy) =>
      `translate(${xy[0] / 20 + 157},${xy[1] / 20 + 80 + o / 2}) scale(0.8)`
  )
  const interpIris = interpolate(
    [st, xy],
    (o, xy) => `translate(${xy[0] / 20},${xy[1] / 20 + -10 + o / 8})`
  )
  const interpPupil = interpolate(