Sending the id of the respective component through a click

I am trying to send the id of the respective object through an on-click event , yet I always end up being sent the synthetic onClick event , how can I change this ? How my array of objects looks like :

[
        {
            id:uuidv4(),
            data:[]
        }
    ]

My onClick={(id)=>handleOpen(id)}

EDIT: It was recommended to change the renderig of the button in the following way :

<button onClick={(e)=>addPieChartGroup(e.target.id)}>Add</button>

Thank you very much !

Answer

you can also do like that so when ever your items got update the map function adjust all index automatically

  const dataArray = [ { id:uuidv4(), data:[] } ]
    
    handleClick = (dataObj) =>{ console.log(dataObj) } 

In render

dataArray.map((obj, index) => <Button id={index} onClick={handleClick(obj)}> Click Me </Button> )