Ref undefined in useFrame on bufferedGeometry with line

[flashpixx]

Hello, I have create my first example, but my ref definition with useRef is undefined in the useFrame function. I'm follow the example on https://sbcode.net/react-three-fiber/use-ref/ and create a useMemo for a bufferedGeometry.

The code and details can be found here https://codesandbox.io/p/devbox/waves-62pzfj
this is the structure:

"use client";

import * as THREE from "three";
import React, { useMemo, useRef, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { ValueNoise } from "value-noise-js/dist/value-noise";

function WaveLine(props: {
  length: number;
  segmentCount: number;
  lineIndex: number;
  lineCount: number;
  amplitude: number;
}) {
  const ref = useRef<THREE.Line>();
  const noise = new ValueNoise(undefined, undefined, "perlin");
  const geom = useMemo(() => {
    const points: Array<THREE.Vector3> = [];

    for (let j = 0; j <= props.segmentCount; j++) {
      const x = (props.length / props.segmentCount) * j - props.length / 2;
      const y = 0;
      const z = props.lineIndex * 0.3 - (props.lineCount * 0.3) / 2;
      points.push(new THREE.Vector3(x, y, z));
    }

    return new THREE.BufferGeometry().setFromPoints(points);
  }, [props.length, props.lineCount, props.lineIndex, props.segmentCount]);

  useFrame(() => {
    if (!ref || !ref.current) return;

    const time = Date.now() / 4000;

    for (let j = 0; j <= props.segmentCount; j++) {
      const px = j / (50 + props.lineIndex);
      const py = props.lineIndex / 50 + time;

      const x = (props.length / props.segmentCount) * j - props.length / 2;
      const y = props.amplitude * noise.evalXY(px, py);
      const z = props.lineIndex * 0.3 - (props.lineCount * 0.3) / 2;

      // @error the ref is undefined
      ref.current.geometry.attributes.position.setXYZ(j, x, y, z);
    }

    const h = Math.round((props.lineIndex / props.lineCount) * 360);
    const s = 100;
    const l = Math.round((props.lineIndex / props.lineCount) * 100);
    ref.current.material.color = new THREE.Color(`hsl(${h},${s}%,${l}%)`);
    ref.current.material.needsUpdate = true;
  });

  return (
    <line ref={ref} geometry={geom}>
      <bufferGeometry />
      <lineBasicMaterial color={0xffffff} transparent={true} opacity={0.8} />
    </line>
  );
}

function WaveAnimation(props: {
  length: number;
  segmentCount: number;
  lineCount: number;
  amplitude: number;
}) {
  const lines = [...Array(props.lineCount)].map((_, i) => (
    <WaveLine
      key={i}
      length={props.length}
      segmentCount={props.segmentCount}
      lineIndex={i}
      lineCount={props.lineCount}
      amplitude={props.amplitude}
    />
  ));

  return <group>{lines}</group>;
}

export default function Waves() {
  return (
    <Canvas>
      <ambientLight intensity={1} color={0xfffff} />
      <WaveAnimation
        amplitude={5}
        length={100}
        lineCount={50}
        segmentCount={100}
      />
    </Canvas>
  );
}

How can I fix it in a correct way? Thanks a lot