React js从路径中删除点更新多边形

import React, { useState } from 'react';

const Polygon = () => {
  const [polygonPoints, setPolygonPoints] = useState([
    { x: 10, y: 10 },
    { x: 50, y: 10 },
    { x: 50, y: 50 },
    { x: 10, y: 50 },
  ]);

  const removePoint = (index) => {
    setPolygonPoints((prevPoints) => {
      const newPoints = [...prevPoints];
      newPoints.splice(index, 1);
      return newPoints;
    });
  };

  return (
    <svg>
      <polygon points={polygonPoints.map((point) => `${point.x},${point.y}`).join(' ')} />
      {polygonPoints.map((point, index) => (
        <circle key={index} cx={point.x} cy={point.y} r={3} onClick={() => removePoint(index)} />
      ))}
    </svg>
  );
};

export default Polygon;