using a custom color on each button

[dim nebula]

I am creating 12 cards through a map function, since I pass in the data through a json object and then I create a card for each item.

Each card has a button and I want the color of each button to be something specific, so I have an array of designated colors, which I loop through and assign the color to the button. This is where I run into the issue:
if I use the style prop I can change the color
how I want but I can't add any styling for hover
effects
if I use the sx or styles prop then the hover
effects get applied but the color for all the
buttons becomes whatever the last color was

How do I go about fixing this?

[frosty stratus]

it has to do with the map function

sx should work

I forget the solution but let me check

could you show what your map function looks like

https://codesandbox.io/s/cocky-bouman-r646hq?file=/src/App.tsx

this seems to work

but I'm not sure how you're doing it

[dim nebula]

yea that works

i think it was cuz I used the arrow function version like this image, so thats why it wasn't working