我有一個 React 組件，其中包括一個顏色選擇器和一個具有不同區域的 SVG，這些區域可以彼此獨立地填充。我的目標是能夠單擊顏色選擇器中的一種顏色，然后單擊 SVG 的一個區域，然后在該區域中填充所選顏色。這是我的組件代碼import React, { useState } from "react";import { GithubPicker } from "react-color";//componentsimport "./css/CustomCreation.css";function CustomCreation() {  const [color, setColor] = useState("");  const colorList = ["#000000", "#ffffff", "#ff0000"];  return (    <div>      <div>        <GithubPicker          colors={colorList}          color={color}          onChange={(updatedColor) => setColor(updatedColor.hex)}          width="100px"        />        <div>You selected {color}</div>      </div>      <svg        version="1.0"        xmlns="http://www.w3.org/2000/svg"        width="200"        viewBox="0 0 370.000000 1000.000000"        preserveAspectRatio="xMidYMid meet"      >        <g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)">          <g className="outline">            <path              id="outline"              fill="black"            />          </g>          <g className="headwear">            <path              id="cap"            />            <path              id="brim"            />          </g>          <g className="skin">            <path              id="face"            />            <path              id="wrist"            />          </g>          <g className="top">            <path              id="top"            />          </g>          <g className="pants">            <path              id="pants"            />          </g>          <path            class="gap"            id="gap"            fill="white"          />          <g className="shoes">            <path              id="rightshoe"            />            <path              id="leftshoe"            />          </g>        </g>      </svg>    </div>  );}export default CustomCreation;如果我像這樣改變一行<g className="headwear" fill={color}>相應的className將成功填充為選擇的顏色。有什么辦法可以讓標簽中的 onClick 發揮作用？