Using css :hover with map() method only working on first element - css

Question

I am creating an app in React and I'm building the menu using an array and the map() method.
I have my navigation buttons displaying correcting and when hovering over the button, the colour changes, however, the transition only works on the first button, when you hover over the other buttons only the colour changes.
Here is my code:
const buttons = ["Button 1", "Button 2", "Button 3", "Button 4", "Button 5"];
{buttons.map((name) => (
<NavButton
key={name}
onMouseEnter={() => setHovered(name)}
onMouseLeave={() => setHovered(!name)}
onClick={() => handleToggle(name)}
className={classNames("george", {
// active: navButtonClicked === name && activeButton === true, //If you just want to make the clicked button have the class active
// active: activeButton === true, //If you want to make all buttons active
// hovered: hovered === name,
})}
>
{name}
</NavButton>
))}
CSS
const NavButton = styled.div`
//Border
border-radius: 100%;
//Colour
color: white;
background: #3498db;
//Positioning
position: absolute;
top: 25px;
left: 25px;
z-index: 1;
//Sizing
width: 60px;
height: 60px;
//Text
text-align: center;
line-height: 60px;
//Transitions
transition: transform ease-out 200ms;
&:hover {
background-color: blue;
transition-duration: 50ms;
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
&:nth-child(1) {
//Positioning
z-index: 2;
}
&.active :nth-child(2) {
//Positioning
transition-duration: 50ms;
transform: translate3d(0, 85px, 0);
}
&.active :nth-child(3) {
transition-duration: 100ms;
transform: translate3d(0, 170px, 0);
}
&.active :nth-child(4) {
transition-duration: 150ms;
transform: translate3d(0, 255px, 0);
}
&.active :nth-child(5) {
transition-duration: 200ms;
transform: translate3d(0, 340px, 0);
}
`;
Am i not understanding something correctly?