Is it possible to dynamic change rendered content like a small video/animation?

[net5566]

I'm new to this THREE...

I'm going to draw 2d path (from gcode) using @react-three/fiber..

The feature I want is I can play an animation which show the paths in order.

That means, if I had a square path. It will start from its left-right point to draw a square.

I try the following method, but there renders nothing.

Console.log just keeps showing the progress from 0 to 3

import React, { useRef, useState }  'react';
import { Canvas, useFrame } from '@react-three/fiber';
import * as THREE from 'three';

const Scene = () => {
  const [progress, setProgress] = useState(0);
  const ref = useRef<any>(null);
  const dataPoints = [[0, 0], [0, 150], [150, 150], [150, 0], [0, 0]];
  const points = [];
  console.log('progress: ', progress);
  useFrame(() => {
    let i = 0;
    while (i <= progress) {
      points.push(new THREE.Vector3(dataPoints[i][0], dataPoints[i][1], 0));
      points.push(new THREE.Vector3(dataPoints[i+1][0], dataPoints[i+1][1], 0));
      i += 1;
    }
    if (progress < 3) {
      setProgress(progress + 1);
    } else {
      setProgress(0);
    }
  });
  const lineGeometry = new THREE.BufferGeometry().setFromPoints(points)
  return (
    <>
      <group position={[0, -2.5, -10]}>
        <lineSegments ref={ref} geometry={lineGeometry}>
          <lineBasicMaterial attach="material" color={'#9c88ff'} linewidth={10} linecap={'round'} linejoin={'round'} />
        </lineSegments>
      </group>
    </>
  );
}

export default function App(props) {
  return (
    <div className='path-panel'>
      <div style={{ height: '500px' }}>
        <Canvas orthographic camera={{ zoom: 1 }} >
          <Scene />
        </Canvas>
      </div>
      <div style={{ height: '250px' }}>
        <div>Tools Panel</div>
      </div>
    </div>
  );
}