当鼠标悬停在 MUI 折线图中的标记（点）上时，工具提示并不总是出现

我正在使用 MUI 中的 LineChart，当将鼠标悬停在标记（点）上时，我需要制作自定义工具提示，但由于某种原因，即使我们直接指向该点，它并不总是出现。大多数情况下，正下方和侧面的点不会显示工具提示。

此外，我希望只突出显示所指向的点，而不是列中的所有点。看起来triger: "item"它应该确实这样做。

import { Box } from "@mui/material";
import { LineChart } from "@mui/x-charts/LineChart";

const graph = {
  columns: ["col 1", "col 2", "col 3", "col 4", "col 5"],
  data: [
    [8000, 17000, 40000, 9000, 32000],
    [23000, 21000, 1000, 6000, 4000],
  ],
};

export default function BasicArea() {
  return (
    <LineChart
      height={300}
      tooltip={{ trigger: "item" }}
      slots={{
        itemContent({ itemData, series }) {
          if (itemData.dataIndex === undefined) {
            return null;
          }

          return (
            <Box
              sx={{
                padding: "10px",

                backgroundColor: "#FFFFFF",
                boxShadow: "0 1px 7px 0 rgba(73, 70, 70, 0.15)",

                display: "flex",
                flexDirection: "column",
                gap: "5px",
              }}
            >
              value: {series.data[itemData.dataIndex]?.toString()}
              <br />
              column: {graph.columns[itemData.dataIndex]}
            </Box>
          );
        },
      }}
      series={[
        {
          BasicArea: "",
          curve: "linear",
          id: "left-branch",
          data: graph.data[0],
          color: "orange",
        },
        {
          curve: "linear",
          id: "right-branch",
          data: graph.data[1],
          color: "green",
        },
      ]}
      axisHighlight={{ x: "none" }}
      xAxis={[
        {
          data: graph.columns,
          scaleType: "point",
          tickPlacement: "middle",
          tickLabelPlacement: "tick",
        },
      ]}
      sx={{
        "& .MuiLineElement-root": {
          strokeWidth: "3px",
        },
      }}
    />
  );
}