Hover flip cards using Reactjs and styled-components all rotating at once - reactjs

Question

Disregard the mess, this is my first project using Reactjs.
I created some cards displaying images of Star Wars characters and when hovered they'll flip and display information about said character.
Unfortunately, whenever I hover one, the card adjacent to it will also rotate.
I know the issue is I have the onMouseEnter essentially applying to all at once however, I'm unsure on how to fix or adjust this problem.
return (
<CardContainer>
{loading && <h1 className="loading">LOADING...</h1>}
{characters.map((character, result) => {
return (
<Card id={result}
onMouseEnter={() => setFlip(true)}
onMouseLeave={() => setFlip(false)}
>
<CardFront flip={flip}>
<CardContent>
<CardImage img={characterToProfileImage[character.name]} />
</CardContent>
<BGFade />
</CardFront>
<CardBack flip={flip}>
<CardContent>
<h1 className="info-name">{character.name} </h1>
<h2 className="info-text">Height: {character.height}cm </h2>
<h2 className="info-text">Weight: {character.mass}kg </h2>
<h2 className="info-text">Gender: {character.gender} </h2>
<h2 className="info-text">Eye color: {character.eye_color} </h2>
<h2 className="info-text">
Birth year: {character.birth_year}
</h2>
</CardContent>
</CardBack>
</Card>
);
})}
</CardContainer>
You can check the code here: https://codesandbox.io/s/billowing-leaf-1mqdud?file=/
and the file in question is components/Characters.js