如何让react-vis的十字准线只显示离鼠标光标最近的系列数据？

import React, { useState } from 'react';
import { XYPlot, LineSeries, Crosshair } from 'react-vis';

const data = [
  { x: 1, y: 10 },
  { x: 2, y: 15 },
  { x: 3, y: 12 },
  // 更多数据点...
];

const Chart = () => {
  const [crosshairValues, setCrosshairValues] = useState([]);

  const handleNearestX = (value, { index }) => {
    const { x, y } = value;
    let minDistance = Infinity;
    let nearestDataPoint = null;

    data.forEach((d) => {
      const distance = Math.abs(d.x - x);
      if (distance < minDistance) {
        minDistance = distance;
        nearestDataPoint = d;
      }
    });

    setCrosshairValues([nearestDataPoint]);
  };

  return (
    <div>
      <XYPlot width={300} height={200} onMouseLeave={() => setCrosshairValues([])}>
        <LineSeries data={data} onNearestX={handleNearestX} />
        <Crosshair values={crosshairValues} />
      </XYPlot>
    </div>
  );
};

export default Chart;