Each dynamically rendered element using array.map gets the same id when assigned an onClick function in Typescript

Question

Each box is getting the assigned the same id only when I assign an onClick function to the boxes, if I remove the onClick then each box gets the correct corresponding id.