Estoy creando un componente nextjs llamado SocialMediaIcon = este componente debe recibir una sola ruta json de lottie y representar un svg de lottie, cuando el usuario se desplaza sobre la animación, debe comenzar a reproducirse y cuando el mouse se va, debe restablecer la animación a la posición 0,

 import { useEffect, useRef, useState } from 'react' import { LottiePlayer } from 'lottie-web' function SocialMediaIcon({ iconPath }) { const ref = useRef(null) const anim = useRef(null) const [lottie, setLottie] = useState(null) useEffect(() => { import('lottie-web').then((Lottie) => setLottie(Lottie.default)) }, []) useEffect(() => { if (lottie && ref.current) { anim.current = lottie.loadAnimation({ container: ref.current, renderer: 'svg', loop: true, autoplay: false, // path to your animation file, place it inside public folder animationData: iconPath, }) return () => anim.current.destroy() } }, [lottie]) const handleAnimation = () => { lottie.play() } const handlemouseOut = () => { lottie.goToAndStop(0) } return ( <div ref={ref} className="lottie h-20 rounded-lg bg-white p-2" onMouseEnter={handleAnimation} onMouseLeave={handlemouseOut} ></div> ) } export default SocialMediaIcon

y así es como estoy representando el componente en el componente principal:

 <SocialMediaIcon iconPath={githubJson} /> <SocialMediaIcon iconPath={twitterJson} />

el problema que tengo es que cuando coloco el cursor sobre un componente, todos los componentes reproducen la animación en lugar de solo el que se ha desplazado

ya he probado:

1.Usar un gancho anim = useRef() y pasarlo a lottie.play(anim.current) lo que resultó en que no se reprodujera ninguna animación

2. También intenté pasar la animación a lottie play lottie.play(lottie.animation) pensando que cada instancia tiene su propia animación y la animación no se reprodujo.

Sería muy apreciado si pudiera ayudarme a entender esto en un nivel más profundo, creo que realmente me estoy perdiendo un concepto importante, no estoy seguro si se trata de Lottie o nextjs en general.