I'm trying to turn the cards around in this game, but I can't. I tried to do some things by manipulating the state, but to no avail. What I want to do is: When I click on the button that is in the Header component, all the cards must turn over. How can I do this?

Code:

import { imagesUrl } from "../../constants/urls"
import useRequestData from "../../hooks/useRequestData"
import { Card, Container, Footer } from "./styledTarotCard"

    const TarotCard = () => {
        const getTarot = useRequestData([], "tarot.json")
    
        const renderCard = getTarot?.cards?.map((card) => {
            return (
                <Card key={card.name}>
                    <img src={`${imagesUrl}${card.image}`} alt={"Imagem da Carta"} />
                    <Footer>
                        <p>{card.name}</p>
                    </Footer>
                </Card>
            )
        })
    
        return (
            <Container>
                {renderCard}
            </Container>
        )
    }
    
    export default TarotCard

Demo: http://muddled-shirt.surge.sh/