opacity usetransition on hover, animates non hovered elements as well [help]

[gopherine]

Not sure if I should have created issue for this because i didnt find similar question anywhere but since I am new i am definitely doing something wrong here.

  {Object.entries(navItems).map(([navItem, value]) => {
            return (
              <a className="h-9" {...bind(navItem)}>
                {transitions.map(({ item, key, props }) =>
                  item === navItem ? (
                    <a.div key={navItem} style={props}>
                      {item}
                    </a.div>
                  ) : (
                    <a.div key={navItem} style={props}>
                      {value}
                    </a.div>
                  )
                )}
              </a>
            )
          })}

As the title says the hover change works fine but it also animates all the elements in that map what i wanted was to animate only the hovered item. Also, animation seems clutterish and sometimes i can see the removal of element is not smooth and it hands or something there.

const transitions = useTransition(showIcon, null, {
    config: { tension: 120, friction: 14 },
    initial: { opacity: 1, transform: "translate3d(0%,0,0)" },
    from: {
      position: "absolute",
      opacity: 0,
      transform: "translate3d(100%,0,0)",
    },
    enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
    leave: { opacity: 0, transform: "translate3d(-50%,0,0)" },
  })