renderNode sample code

[bharath123456789]

Hi, I am trying to use renderNode method, with that in foreignObject, I am trying to call the onClick event but it's not being caught, can anyone please help me on it, below is the code I am using.

renderNode = (nodeRef, data, id, selected, hovered) => {
    return (
      <g className="shape">
        {!selected ? null : (
          <foreignObject x="-77" y="-77" width="154" height="77">
            <i
              className="dls-icon-edit"
              onClick={() => console.log('onClick console')}
              style={{
                padding: '20px',
                fontSize: 20,
              }}
            />
          </foreignObject>
        )}
        <use
          className={`node ${selected ? 'selected' : ''}`}
          x="-77"
          y="-77"
          width="154"
          height="154"
        />
      </g>
    );
  };

I am able to see that pencil icon, but if I click on it I am not getting the console log.