Reactjs 如何将索引保持在React.use状态？

我在

图像的map函数上有一个索引，我想把它保存在
useState
const[selectedIndex，setSelectedIndex]=React.useState（）
中，因为我想将它用于三元运算符。但我该怎么做呢？
我想你们能做的最好的事情就是

// keep a state for the selected items, it's null initially
const [selectedItem, setSelectedItem] = React.useState(null);


<li ref={itemRef}
    ....
    onMouseEnter={() => { handleMouseEnter(index, item) }}//pass the items to the function

function handleMouseLeave() {
    .....
    setSelectedItem(null)// set selected item to null on mouse leave
}


function handleMouseEnter(index, item) {
  setMouseLeave(true)
  setSelectedItem(item)
}


selectedItem && <animated.img
        key={selectedItem .id}
        style={animatedProps}
        className={styles.image}
        src={selectedItem.coverImageDefault}
        srcSet={selectedItem.coverImage}
      />

//保留所选项目的状态，最初为空
const[selectedItem，setSelectedItem]=React.useState（null）；
{handleMouseCenter（索引，项）}}//将项传递给函数
函数handleMouseLeave（）{
.....
setSelectedItem（null）//在鼠标离开时将所选项目设置为null
}
函数HandleMouseCenter（索引，项）{
setMouseLeave（真）
setSelectedItem（项目）
}
选择编辑项&为您设置的简化版本
您想在哪种条件下设置
selectedIndex
？谢谢您的回答。现在的问题是，它同时显示两个图像。但目的是仅显示与项目匹配的图像。你能帮我吗？我已经更新了我的代码耶，我知道，但是我的代码有点问题。因为在我的网站上，每次悬停都会显示两张图片。你知道为什么吗？