Reactjs 如何在重新图表中更改悬停时的条形填充 colored颜色

我有一个条形图，其中的条形图是根据其y值填充的.如何更改悬停状态下的背景 colored颜色 ？

红色--紫色 绿色-&>蓝色

Sandbox个

export default function App() {
  const colorizeBars = (data) => {
    const coloredData = data.map((bar) => {
      if (bar.uv > 3000) {
        return { ...bar, fill: "#00ff00" };
      } else {
        return { ...bar, fill: "#ff0000" };
      }
    });
    return coloredData;
  };
  const coloredData = colorizeBars(data);
  return (
    <div style={{ height: 300 }}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          width="100%"
          height={300}
          data={coloredData}
          margin={{
            top: 50,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <XAxis
            dataKey="name"
            tickLine={false}
            style={{
              fontSize: 14,
              color: "#000000",
              fontFamily: "Arial",
              fontWeight: "bold",
            }}
          />
          <YAxis tickLine={false} />
          <Tooltip />
          <Legend />
          <Bar dataKey="uv" label={<CustomizedLabel />} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}