悬停会妨碍鼠标光标在 ReactJS 中执行 onClick 事件

Question

我的项目有一个印度州级地图代码，它具有蜂巢效果和 onClick 事件。但是当我将鼠标悬停在任何状态上时，悬停会妨碍我，因为我的光标在悬停卡上而不是直接与状态地图交互，所以我无法执行点击事件。你的文字

import { Grid } from "@mui/material";
import React, { useState } from "react";

import ReactDatamaps from "react-india-states-map";

const STATES = {
Maharashtra: {
value: 50,
content: {
txt: "Lorem ipsum dolor sit amet consectetur adipisicing elit. A quisquam quae laboriosam sed magni aliquam dolore sequi libero harum, hic nihil. Omnis eos deserunt molestiae harum, cum nemo et temporibus?",
},
},
};

export const IndiaMap = () =\> {
const \[activeState, setactiveState\] = useState({
data: STATES.Maharashtra,
name: "India",
});

const \[stateLists, setStateLists\] = useState(STATES);

const stateOnClick = (data, name) =\> {
console.log("Hello Guys, This is a click event");
};
//   const stateOnClick = (data, name) =\> {
//     setactiveState({ data, name });
//   };

return (
\<Grid sx={{ height: "100px" }}\>
\<ReactDatamaps
regionData={stateLists}
mapLayout={{
hoverTitle: "Count",
noDataColor: "#D36418",
borderColor: "#ffffff",
hoverBorderColor: "pink",
hoverColor: "green",
}}
hoverComponent={() =\> {
return (
\<\>
<p>Here we will add hover details</p>
\</\>
);
}}
onClick={stateOnClick}
activeState={activeState}
sx={{ margin: "5px", padding: "100px" }}
/\>
{/\* hoverComponent={({ value }) =\> {
return (
\<\>
<p>{value.name}</p>
\</\>
);
}}
onClick={stateOnClick}
activeState={activeState}
/\> \*/}
\</Grid\>
);
};

我有这段代码，我是 React 地图的新手，所以我不知道该怎么做。请帮助