Render single component on hover

Question

I currently have two avatars that are rendered on a page. On hover I want a card to pop up that displays player information. Currently when hovering on the first avatar both player cards pop up and i only want the card of the avatar that is hovered over. The second issue is that on hover of the second avatar nothing happens. I'd like the card of the avatar that is hovered to only pop up.

function Profiles() {
    const { hovered, ref } = useHover();
    return (
        <Container style={{ display: "flex" }}>
            <div ref={ref}>
                {hovered ? (
                    <PlayerOne />
                ) : (
                    <Avatar
                        radius="xl"
                        size="xl"
                        src={tobias}
                        style={{ border: "black solid .1rem" }}
                        sx={(theme) => ({
                            backgroundColor: theme.colors.yellow[1],
                            "&:hover": {
                                backgroundColor: theme.colors.yellow[3],
                            },
                        })}
                    />
                )}
            </div>

            <div>
                {hovered ? (
                    <PlayerTwo />
                ) : (
                    <Avatar
                        radius="xl"
                        size="xl"
                        src={vij}
                        style={{ border: "black solid .1rem" }}
                        sx={(theme) => ({
                            backgroundColor: theme.colors.yellow[1],
                            "&:hover": {
                                backgroundColor: theme.colors.yellow[3],
                            },
                        })}
                    />
                )}
            </div>
        </Container>
    );
}

export default Profiles;

Answer 1

this makes sense but just use good old CSS. oh and if using React its className of course, not class

            <div class="parent">
                <div class="child1">
                    <PlayerOne />
                </div>
                <div class="child2">
                    <Avatar
                        radius="xl"
                        size="xl"
                        src={vij}
                        style={{ border: "black solid .1rem" }}
                        sx={(theme) => ({
                            backgroundColor: theme.colors.yellow[1],
                            "&:hover": {
                                backgroundColor: theme.colors.yellow[3],
                            },
                        })}
                    />
                </div>
            </div>

            <div class="parent">
                <div class="child1">
                    <PlayerTwo />
                </div>
                <div class="child2">
                    <Avatar
                        radius="xl"
                        size="xl"
                        src={tobias}
                        style={{ border: "black solid .1rem" }}
                        sx={(theme) => ({
                            backgroundColor: theme.colors.yellow[1],
                            "&:hover": {
                                backgroundColor: theme.colors.yellow[3],
                            },
                        })}
                    />
                </div>
            </div>

in your CSS

.child1 { display: none; }
.parent:hover > .child1 { display: none; }
.parent:hover > .child2 { display: block; }