i am building a nextjs component called SocialMediaIcon = this component should recive a single lottie json path and render a lottie svg, when the user hovers on the animation it should start playing and when the mouse leaves it should reset the animation to position 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

and this is how i am rendering the component in the parrent component :

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

the problem i'm having is that when i hover over one component all the components are playing the animation instead of just the one that has been hovered

i have already tried :

1.using a anim = useRef() hook and passing it to lottie.play(anim.current) which resulted in no animation being played at all

2.i also tried passing animation to lottie play lottie.play(lottie.animation) thinking every instance has its own animation and the animation did not play .

it would be greatly appreciated if you could help me understand this on a deeper level, i think im really missing a important concept not sure if its about lottie or nextjs in genral.