React实现hover后div显示问题

问题相关代码

  const [email,setEmail]=useState([
        {name:'user1',isHover:false},
        {name:'user2',isHover:false},
        {name:'user3',isHover:false},
        {name:'user1',isHover:false}
  ])

  //hover到email的item上
  function emailMouseOver(changeIndex){
    let result = email
    result.forEach((item,index)=>{
      if(index === changeIndex){
        item.isHover = true
      }
    })
    setEmail(result)
  }
  //鼠标离开email的item
  function emailMouseLeave(changeIndex){
    let result = email
    result.forEach((item,index)=>{
      if(index === changeIndex){
        item.isHover = false
      }
    })
    setEmail(result)
  }

外层是一个map遍历
 {
        item.isHover?
         <div className="email-tools">
           <div>111</div>
            <div>111</div>
            <div>111</div>
            <div>111</div>
          </div>:<div></div>
}

hover后打印出来的的数据是变化了的 但是渲染没有变化？刚开始学react 技术还不是很懂 大家帮忙看看。

  const emailMouseLeave = useCallback((changeIndex)=>{
    let result = email.concat()
    result.forEach((item,index)=>{
      if(index === changeIndex){
        item.isHover = false
      }
    })
    setEmail(result)
  },[email])

也没报错吗 ?
写成这种形式 试试

const emailMouseOver=(changeIndex)=>{
    let result = email
    result.forEach((item,index)=>{
      if(index === changeIndex){
        item.isHover = true
      }
    })
    setEmail(result)
  }