Here is the code for my card component:

import React from 'react'
import { motion } from 'framer-motion'

const Card = ({ classValue, image, index, midIndex }: { classValue: string, image: string, index: number, midIndex: number }) => {

    return (

        <motion.img
            className={"card"+classValue}
            src={image} alt="card"
            key={index}
            style={{
                transform : "rotate(10deg)"
            }}
            whileHover={{
                scale: 1.3,
                y: 50
            }}
        />

    )
}

export default Card

At initial render, the all the cards are rotated by 10deg as shown in this ss below:

after hovering over any card, each scaling up successfully, its css of rotation is removed permanently

Note: After initial hover, the whilehover method is still working fine

Please help me fix this