Hovering and removing item in React.js

In my todolist I have a list of tasks posted in a column. Each task has its own state:

    state = {
        hover: false
    }

And events:

    switchHover = () => {
        this.setState({ hover: !this.state.hover });
    }

     onMouseEnter={this.switchHover}
     onMouseLeave={this.switchHover}

When the task is active, it displays the delete and edit icons whose classes change from state. When you delete the task, the lower task jumps and the onMouseEnter event is not activated, which leads to the fact that the state is the opposite of the desired. And my icons are shown when the item is not hovered, and aren't shown when item hovered. Here is my icon:

   <span
       onClick={this.removeTask}
       className={this.state.hover ? 'task__remove-icon visible' :
           'task__remove-icon hidden'}>
       &#x2715;
   </span>

here is image of my list So, how I can fix this?

It will be easier and more correct to implement such functionality with css, like here just with your icons and content

.card {
  display: flex;
  justify-content: around;
  align-items: center;
  padding: 15px;
  border: 1px solid gray;
  background-color: yellow;
}

.task__remove-icon {
  display: none;
  margin: 0px 20px;
}

.card:hover .task__remove-icon {
  display: block;
  background-color: blue;
}

<div class='card'>
  <span> some content</span>
  <button class='task__remove-icon'>Remove</button>
</div>