我为一个Svg做了一个组件，我试图应用onClick事件，所以我改变了状态，但由于某种原因，它不起作用，我不知道我做错了什么。我也试着应用onCLick，但它也不起作用。
我的代码

import React, { useState } from "react";
import './style.scss'

const AverageSvg=() => {
  const [active, setActive] = useState(false);

  return (
    
    <svg className="average"  onClick={() => setActive(false)} 
      xmlns="http://www.w3.org/2000/svg"
      width="170.539"
      height="51.974"
      viewBox="0 0 170.539 51.974"
    >
      <g data-name="The average" transform="translate(-1223 -2501)" >
        <g className={active ? "clicked-fill" : "fill "} 
          // fill="none"
          stroke="#707070"
          strokeWidth="1"
          data-name="Rectangle 60"
          transform="translate(1223 2501)"
        >
          <rect 
            width="170.539"
            height="51.974"
            stroke="none"
            rx="25.987"
          ></rect>
          <rect
            width="169.539"
            height="50.974"
            x="0.5"
            y="0.5"
            rx="25.487"
          ></rect>
        </g>
        <text className="text"
          // fill="#464646"
          data-name="The average"
          fontFamily="ArialMT, Arial"
          fontSize="17"
          transform="translate(1261 2532)"
        >
          <tspan x="0" y="0" >
            The average
          </tspan>
        </text>
      </g>
    </svg>
    
  );
}

export default AverageSvg;