如何在rechart中添加倒三角形散点

import React from 'react';
import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const TriangleIcon = (props) => {
  const { cx, cy, size, fill } = props;
  const height = Math.sqrt(3) / 2 * size;
  const points = `${cx},${cy - size} ${cx - size / 2},${cy + height / 2} ${cx + size / 2},${cy + height / 2}`;

  return (
    <polygon points={points} fill={fill} />
  );
};

const MyChart = () => {
  const data = [
    { x: 1, y: 2 },
    { x: 2, y: 3 },
    { x: 3, y: 4 },
    // 添加更多数据...
  ];

  return (
    <ScatterChart width={400} height={300}>
      <CartesianGrid />
      <XAxis type="number" dataKey="x" />
      <YAxis type="number" dataKey="y" />
      <Tooltip />
      <Scatter data={data} shape={<TriangleIcon size={10} fill="red" />} />
    </ScatterChart>
  );
};