Estoy tratando de animar un cambio de posición del cuadro activo. Cuando el usuario hace clic en el cuadro, me gustaría que el cuadro animara un cambio en la parte superior del margen y que el resto de los cuadros permanecieran en 0px. Cuando el usuario cambia el cuadro activo, el cuadro previamente activo volverá a 0px y el nuevo cuadro activo adquirirá un margen superior de 50px.

Creo que estoy casi allí, pero aún no he logrado que funcione. Estaría muy agradecido si alguien pudiera ayudarme a iluminarme en cuanto a lo que estoy haciendo mal.

 import { useSpring, useSprings, animated } from "react-spring"; import styled from "styled-components"; const Nav = () => { // Set Active Box const [activeBox, setActiveBox] = useState(0); const handleClick = (index) => { setActiveBox(index); }; // Boxes const boxes = [box1, box2, box3, box4]; // useSprings const springs = useSprings( boxes.length, boxes.map((box, index) => ({ marginTop: activeBox === index ? 50 : 0, })) ); return ( <NavContainer> {springs.map((prop, index) => ( <StyledBox style={prop} key={index} onClick={() => handleClick(index)} currentActiveBox={activeBox === index} > <img src={boxes[index]} alt="" /> </StyledBox> ))} </NavContainer> ); }; export default Nav; const NavContainer = styled.div` position: absolute; bottom: 0; width: 200px; height: 75px; `; const StyledBox = styled.div` width: 25px; height: 25px; img { width: 100%; height: 100%; } `;

¡Gracias!