How to use state variables without sharing among different components inside a loop

#react #javascript

I have two cards component inside a loop as given below in the code. In the card I have a text field and an ADD button. Upon clicking on ADD button,the entered value in the text field will be populating inside the card. But when I do this , the other card is also showing the same value. That means , suppose I entered a value in the text field of the first card then the same value is showing in the second card as well. I know this is happening because I am using the same state variable inside the loop and which is sharing among the other card components inside the loop. I am not able to find a solution so that if I enter something in the text field of a card component then it will not reflect on other components inside a loop.

Here is the code:
https://codesandbox.io/s/silly-taussig-kgbot