是的，您可以使用React将click事件分配给SVG中的路径。
为此，您可以使用React SVG组件创建一个SVG元素，然后在其中创建一个path元素，然后使用onClick属性为path元素分配一个click事件处理程序。q

import "./styles.css";

export default function MyComponent() {
  const handleClick = () => {
    console.log('Path clicked!');
  };

  return (
    <svg width="100" height="100">
      <path d="M10 10 H 90 V 90 H 10 L 10 10" onClick={handleClick} />
    </svg>
  );
}

使用css pointer events属性，将paths设置为all，将路径以外的其余区域设置为none。

import React, { useState } from "react";
import styled from "styled-components";
import { ReactComponent as SouthAmerica } from "./assets/South_America.svg";

const StyledSouthAmerica = styled(SouthAmerica)`
 //Here set to none
  pointer-events: none;
  & path {
    fill: ${(props) =>
      props.fillcolor}; // Change the color to whatever you want
    stroke: ${(props) => props.stroke};
   //Here allow only for paths
    pointer-events: all;
    cursor: pointer;
  }
`;

export default function Geomap() {
  const [isGeomapSelct, setIsGeomapSelct] = useState(false);

  const handleClick = () => {
    console.log("Button clicked!");
    setIsGeomapSelct(pre=>!pre);
  };

  return (
    <StyledSouthAmerica
      fillcolor={isGeomapSelct === true ? "#C9E9E1" : ""}
      stroke={isGeomapSelct === true ? "#61AD96" : ""}
      onClick={handleClick}
    ></StyledSouthAmerica>
  );
}

注意，在camelCase中传递fillColor将不会被DOM识别，而是使用fillcolor。