how to detect onClick event using konva shape

Question

I made custom shapes to be added on the click position with react-konva. Now I want to detect onClick event when added custom shapes are clicked, but I think there is a problem because onClick events for Stage and Shape are overlapped. ( onBasicClick function doesn't work and new custom shape are just added on clicked position because of onSolveClick function.)

Is there any good way to solve this?

( my idea is to do not add new shape on the position if some parts of shape is overlapped but I don't know how to.)

const Basic = ({points}) => {
  const onBasicClick = () => {
    console.log("onBasicClick");
  };
  return (
    <Shape
      points = {points}
      onClick={onBasicClick}
      sceneFunc={(context, shape) => {
          //customshape
      }}
      stroke="#C879E6"
      strokeWidth={1}
      fill='#F6DEFF'
    />
  );
};
function App() {

  const [basicFigure, setBasic] = useState([])
  const onSolveClick = (e) => {
    const pos = e.target.getStage().getPointerPosition()
    const newBasicFigure = basicFigure.concat([pos])
    setBasic(newBasicFigure)
  }
  return (
    <>
      <Stage  width={w} height={h} onClick={onSolveClick}>
        <Layer>
          {basicFigure.map(item => (
            <Basic 
              points={item}
              key = {item.x+item.y}
            />
          ))}
        </Layer>
      </Stage>
    </>
  )
}

Answer 1

It was event bubbling problem. I solved it using e.cancelBubble

const onBasicClick = (e) => {
    console.log("onBasicClick");
    e.cancelBubble = true; //prevent event bubbling
};