I want to make a 2D Vector Map with a react-three, but it doesn't work.Is there any problem?

Question

import React from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

import * as THREE from "three";

const VectorArrow2D = ({ x, y, size, angle }) => {
  const radianAngle = (angle * Math.PI) / 180;
  const dir = new THREE.Vector2(Math.cos(radianAngle), Math.sin(radianAngle));
  const scaledDir = dir.multiplyScalar(size);

  return (
    <arrowHelper
      args={[scaledDir, new THREE.Vector3(x, y, 0), size, 0xffffff]}
    />
  );
};

const VectorPlot = () => {
  const [vectors, setVectors] = React.useState([
    { x: 50, y: 50, size: 50, angle: 45 },
    { x: 100, y: 100, size: 75, angle: 30 },
    // Add more vectors as needed
  ]);

  return (
    <Canvas style={{ width: "100%", height: "100vh" }}>
      <OrbitControls />
      {vectors.map((vector, index) => (
        <VectorArrow2D
          key={index}
          x={vector.x}
          y={vector.y}
          size={vector.size}
          angle={vector.angle}
        />
      ))}
    </Canvas>
  );
};

export default VectorPlot;

Here is my code.. I want to make a vector map on my webpage. Vector map can be implemented in highchart and zingchart, but it is not supported in react 18. So I'm trying to make it using the react-three. I can not find any problem on this codes Does anyone can help me?

Show nothing on the canvas.