How can I change the text of a button based on click if is looped inside a map function?

I am mapping over a series of cards in a form component like this :

```

{links?.map((i,j) => (
  <main className={styles["card-container"]} key={j}>
    <Card
        url={i?.url}
        shortenUrl={i?.shorten}
    />
  </main>
))}

```

That Card renders a URL link, a shortened link and a button that says “click”

<div>
  <div>{url}</div>
  <div>{shortenUrl}</div>
  <Button>Copy</Button>

</div>

The Button too is a reusable component,

  return (
    <>
      <button>{children}</button>
    </>
  )

What I want to do:

• I want to click the button on any of the mapped cards, and the button text should be changed to “copied”

what I have tried :

• I have tried using a state to change the text, but it changes “copy” -> “copied” on all the mapped cards.
• I also tried passing props from the form component using prop drilling to the Button component, but it doesn’t work as expected.
• I looked at other answers here on SO, one answer was to use button text as an array itself, but I’m not sure how to implement it in this context.

Any solution to this?

Thanks for reading this far