XAxis在Rechart的ScatterChart when type=“类别”中重复自己

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

const data = [
  { x: 'A', y: 10 },
  { x: 'B', y: 20 },
  { x: 'C', y: 30 },
  { x: 'D', y: 40 },
];

const CustomizedAxisTick = (props) => {
  const { x, y, payload } = props;

  return (
    <g transform={`translate(${x},${y})`}>
      <text x={0} y={0} dy={16} textAnchor="middle" fill="#666">{payload.value}</text>
    </g>
  );
};

const App = () => {
  return (
    <ScatterChart width={400} height={300}>
      <CartesianGrid />
      <XAxis dataKey="x" type="category" tick={<CustomizedAxisTick />} />
      <YAxis dataKey="y" type="number" />
      <Tooltip cursor={{ strokeDasharray: '3 3' }} />
      <Scatter data={data} fill="#8884d8" />
    </ScatterChart>
  );
};

export default App;