Chevron icons should behave separately on hovering dropdown menus in react js

I am facing this problem to show the chevron icon behavior separately on mouseover on each dropdown menu. I mean each chevron icon does UP and DOWN WHEN I'll hover on it separately.

What is I want to hover the chevron icon for each dropdown menu separately so that when I hover on the menu label it does the behavior only once and should not affect other menu labels I tried to implement logic to achieve this: chevron icon on hovering but, still couldn't get it.

So far, I did like this where all chevron icons are behaving on every menu: working code sandbox example What I'm missing here ??

Is there any way in reactjs to get the chevron icon effect separately for each menu on mouse hover ??

Please help me with this :(

Solution

After a lot of searching & googling, I found a way that was silly strange for me and maybe for you, that instead of icons I also could use svg adding this group and group-hover:-rotate(-180) in SVG's className and this works fine as expected!

<a onClick={(e) => e.preventDefault()}>
                  <Space
                    className="relative group ml-10 cursor-pointer hover:text-purple-500 text-[16px]"
                  >
                    {item.menu}
                    <span>
                      <svg
                        className="fill-current stroke-0 stroke-slate-600  h-3.5 w-3.5 transform group-hover:-rotate-180
    transition duration-150 ease-in-out"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20"
                      >
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
         </svg>
      </span>
     </Space>
</a>