Javascript 如何在父元素悬停时更改 SVG 的描边(作为react 组件导入)

我使用的是react+tailwindcss v3，但我不知道如何更改其父元素hover上的SVG笔划 colored颜色 .

这是我在其中呈现SVG component的代码

import Arrow from "../../assets/logos/Arrow_up_right";

const MyComponent= () => {
    const onhover = "blue";
    const normal = "red";

    return (
       <ul className='list-none px-2'>
          <li> className='my-2 h-12 w-12 flex items-center justify-center rounded-lg bg-gray-100 hover:cursor-pointer'>
             <Arrow stroke={normal} />
          </li>
       </ul>
};

Arrow是返回SVG的组件.我已经给它传递了一个prop，然后用它来提供color到arrow个SVG的行程.

下面是SVG组件:

const Arrow_up_right = ({ stroke }) => {
    return (
        <svg
            width='8'
            height='8'
            viewBox='0 0 8 8'
            fill='none'
            xmlns='http://www.w3.org/2000/svg'
        >
            <path
                d='M0.666626 7.33335L7.33329 0.666687M7.33329 0.666687H0.666626M7.33329 0.666687V7.33335'
                stroke={stroke}
                stroke-linecap='round'
                stroke-linejoin='round'
            />
        </svg>
    );
};

export default Arrow_up_right;

103是我想要传递的prop的值应该在li的hover上改变， 如果不能做到这一点，请建议一些其他方法.

任何帮助都将不胜感激.:)