如何在nivo折线图上实现该功能？

npm install @nivo/line

import React, { useState } from 'react';
import { ResponsiveLine } from '@nivo/line';

const data = [
  {
    id: 'series1',
    data: [
      { x: 'Jan', y: 30 },
      { x: 'Feb', y: 40 },
      { x: 'Mar', y: 50 },
      // ... more data points
    ],
  },
];

const LineChart = () => {
  const [selectedPoint, setSelectedPoint] = useState(null);

  const handleClick = (point) => {
    setSelectedPoint(point);
  };

  return (
    <div style={{ height: '500px' }}>
      <ResponsiveLine
        data={data}
        onClick={(point) => handleClick(point)}
        pointSize={10}
        pointColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
        tooltip={({ point }) => (
          selectedPoint && selectedPoint.id === point.id && selectedPoint.data.x === point.data.x ? (
            <div>
              <strong>{point.data.x}</strong><br />
              Value: {point.data.y}
            </div>
          ) : null
        )}
      />
      {selectedPoint && (
        <div style={{ position: 'absolute', top: `${selectedPoint.y}px`, left: `${selectedPoint.x}px` }}>
          <strong>{selectedPoint.data.x}</strong><br />
          Value: {selectedPoint.data.y}
        </div>
      )}
    </div>
  );
};

export default LineChart;