whileInView and whileHover conflicting

I have a grid component and a card component that goes inside this. I wanted to animate each child of the grid whileInView so I added this prop to the parent and was working properly.

The problem comes when I try to add whileHover prop to the childs, it causes the whileInView prop to be disabled. I have also tried to add it on the parent but it makes the grid to anime as a whole.

Grid component:

<SmallGridSection key={`div-${title}`}>
    <SmallGrid
        key={`grid-${title}`}
        variants={gridVariants}
        initial={"hidden"}
        whileInView={"visible"}
        viewport={{ once: true }}
        >

        {array.map(
            technology =>

            <Card technology={technology} key={technology.name}/>
        )}
    </SmallGrid>
</SmallGridSection>

using this variants:

const gridVariants = {
    visible: {
        transition: {
            when: "beforeChildren",
            delayChildren: 1,
            staggerChildren: 0.1,
        },
    },
    hidden: {
        transition: {
            when: "afterChildren",
            duration: 1,
            type: "spring",
        },
    },
}

Card component:

const Card = ({ technology, ...props }) => {

    return(
        <CardStyled
            color={technology.color}
            variants={cardVariants}
            title={technology.name}

            (   *this is where i tried to add "whileHover={"hovered"}*)

            {...props}
            >
                <a>
                    <TechnologyIcon technology={technology}/>
                </a>
        </CardStyled>
    )
}

with this variants:

const cardVariants = {
    hidden: { 
        opacity: 0, 
        rotate: "100deg"
    },
    visible: { 
        opacity: 1,
        rotate: 0, 
    },
    animated: {
        translateY: "-5px",
        transition: {
            type: "spring",
            delay: 3,
            duration: 0.5,
            repeat: "infinity",
        },
    },
    hovered: {
        scale: 1.08,
        transition: {
            duration: 0.2,
            ease: "easeInOut",
        },
    }
}