I am trying to make nodes clickable and do some navigation. But the nodes dont take the click..

const CustomNodeComponent = ({ data }) => {
  const handleNodeClick = () => {
    alert('Node clicked: ' + data.label);
  };

  return (
    <div
      onClick={handleNodeClick}
      style={{
        cursor: 'pointer',
        backgroundColor: 'orange',
        borderRadius: '8px',
        padding: '10px',
      }}>
      <Handle type="target" position={Position.Top} />
      <Link to={`/courses`} className="cursor-pointer">
        {data.label}
      </Link>
      <Handle type="source" position={Position.Bottom} />
    </div>
  );
};

I tried to use button onCLick onNodeCLick evrything nothing works.

here is the react flow component:

<div style={{ height: '100vh', width: '100%' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        nodeTypes={{ custom: CustomNodeComponent }}
        elementsSelectable={true}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        minZoom={0.5}
        maxZoom={2}>
        <MiniMap />
        <Controls />
        <Background />
      </ReactFlow>
    </div>