Well, first of all, reason for your component re-rendering over and over seems to be
circular dependency.

in useEffect dependency array you have added cards, and in that useEffect you have called a function that changes the values of cards ,

so when first time this useEffect will run and your function will be executed then the value of cards will be changed so it will trigger the useEffect again because cards has been added as dependency so every time cards changes useEffect will run the function in it , so it will go to infinite loop.

well i don't think you need to add cards in dependency array as you only changes its value based on the data you get from the api call, which will be called at least one time even if make dependency array empty.