I am trying to console.log the random number which is given as ID's for the object items(circles in this case) when a click event occurs on the circles that I have created.I have tried by defining an onClick function and calling it in the FruitBowl.js module. I am getting an undefined error while using the below code.

import { select,range  } from 'd3';
    import {fruitBowl} from './fruitBowl';
    const svg = select('svg');
    
    const makeFruit = type => ({
      type,
      id: Math.random()
    });
    let fruits = range(5)
        .map(() => makeFruit('apple'));
    let selectedFruit= null;
    const onClick= d => {
        selectedFruit= d.id;
      render();
    };
    
    const render = () => {
        fruitBowl(svg,{
                    fruits,
              height:+svg.attr('height'),
                    onClick
      });
    };
    
    render();
    
    setTimeout(() => {
        fruits.pop();
        render();
    },1000);
    
    setTimeout(() => {
        fruits[2].type = 'lemon';
        render();
    },2000);
    
    setTimeout(() => {
        fruits = fruits.filter((d,i)=> i !==1); //to select all elements except element 2
        render();
    },3000);

Below is the fruitBowl.js module which is being exported to the index.js file.

import { scaleOrdinal } from 'd3';
const colorScale = scaleOrdinal()
    .domain(['apple','lemon'])
    .range(['red','yellow']);
const radiusScale = scaleOrdinal()
    .domain(['apple','lemon'])
    .range([50,30]);

// function that does multiple operations like .enter and .exit

    export const fruitBowl =  (selection,props) =>{
      const {fruits,height,onClick} = props;
        const circles =selection.selectAll('circle')
         .data(fruits,d=>d.id);
      
      const xPosition = (d,i) => i*120+80;
    
      circles
        .enter().append('circle')
          .attr('cx',xPosition)
          .attr('cy',height/2)
          .attr('r',0)
        .merge(circles)     //merge operation of enter and updates
          .attr('fill',d => colorScale(d.type))
            .on("click",d => {
                console.log(d.id);
      })
        .transition().duration(1000)
            .attr('cx',xPosition)
          .attr('r',d =>radiusScale(d.type));
    
    
    
    //code to remove an element from the data
    circles.exit()
      .transition().duration(1000)
        .attr('r',0) 
      .remove();
      //.attr('fill','black');   
    };