I'm using .on('click') in my code but it is working only when I double click the element.

I'm wondering what's causing this issue.

Here's the code:

node = instance
                  .selectAll('.node')
                  .data(bubble(nodes).descendants())
                  .enter()
                  .filter(d => !d.children)
                  .append('g')
                  .attr('class', styles.widgetComponentCusterNode)
                  .attr('transform', () => `translate(${width / 2},${height / 2})`)
                  .on('click', d => {
                    
                    console.log('OnClick event called!!!');

                  })
                  .call(d3.drag().on('setContexttart', dragstarted).on('drag', dragged).on('end', dragended))
                  .on('mouseover', mouseover)
                  .on('mouseout', mouseout);

Am I missing something here?

Thanks in advance.