React. What is the correct way to bind the event to the elements displayed in the loop?

Question

React

When displaying elements in a component through a loop, you need to hang a mouseover event on each of them. But with this implementation, the event fires on all elements at once.
Hover function:

SomeFunction () {
    this.setState=({
        hover: !this.state.hover
    })
}

Loop example:

const arr = data.map((item, id) => {
    <div key={id} onMouseEnter={() => this.SomeFunction()}>
          <span className='someClass'>{item.name}</span>
          <SomeComponent hover={this.state.hover}  data={item.data}/>
    </div>
})

How to make the event fire only for the element on which it fires and not for all the elements displayed through the loop.

Answer 1

well, so we write hover: true in the parent component, and then it becomes true for everyone
put it in a separate component, each of which will have its own state?