Javascript React传单集填充鼠标上方/鼠标外的单个椭圆的不透明度

我创建了一个地图，其中显示了使用和创建的椭圆

我将鼠标事件处理程序传递给椭圆的道具。当我将鼠标悬停在椭圆上时，

fillOpacity

从0.0更改为0.5，然后在鼠标悬停时从0.5更改为0.0

问题是，当事件被触发时，每个椭圆的

fillOpacity

都会发生变化，而不仅仅是悬停在上面的椭圆。我如何才能使其仅在悬停的特定椭圆上更改其

fillOpacity

映射组件

---

const Map=（）=>{
const[map，setMap]=useState（null）；
常量[fillOpacity，setFillOpacity]=useState（0）
const onMouseEvent=（事件，类型）=>{
开关（类型）{
案例“结束”：
setFillOpacity（0.5）
打破
案例“出局”：
setFillOpacity（0.0）
打破
违约：
打破
}
}
返回(
setMap（map）}
>
{CITIES.map（（城市，索引）=>{
返回(
onMouseEvent（事件“结束”），
mouseout：（事件，类型）=>onMouseEvent（事件，'out'），
}}
>
{城市，城市}
)
})}
);
};

椭圆分量

---

从'@react传单/core'导入{createPathComponent}
从“传单”中导入L
导入“传单椭圆”
常量椭圆=createPathComponent（createEllipse，updateEllipse）
函数createEllipse（道具、上下文）{
常数{中心、半径、倾斜、选项}=道具
常量实例=新的L.椭圆（中心、半径、倾斜、选项）
返回{
比如,，
上下文：{…上下文，覆盖容器：实例}，
}
}
函数updateEllipse（实例、道具、prevProps）{
如果(
props.center！==prevProps.center||
props.radii！==prevProps.radii||
props.tilt！==prevProps.tilt||
props.options！==prevProps.options
) {
instance.setStyle（props.options）
实例.setLatLng（道具中心）
实例.setRadius（props.radii）
实例.setTilt（props.tilt）
}
}
导出默认椭圆

问题在于，所有省略号都使用相同的状态变量。在这里：

{CITIES.map（（城市，索引）=>{
返回(