React - Прокрутите массив объектов и выделите выбранный элемент onClick

У меня есть массив объектов, содержащий данные, которые я выводил в DOM с помощью карты. Каждый элемент в списке имеет прослушиватель событий onClick. Когда вы нажимаете на один из элементов, я хочу, чтобы он выделялся путем добавления класса css, например «hover». Так что в основном это должно работать как система меню. Когда вы нажимаете на элемент, этот элемент выделяется, а другие выделяться не должны, и наоборот.

Так, как я настроил прямо сейчас, все элементы в списке выделяются, что не является той логикой, которую я пытаюсь сделать. Я использовал console.info, чтобы показать, какой элемент был нажат. Однако я до сих пор не понял, как сделать этот выбранный элемент тем, который выделен, а не весь список?

import React, { Component } from 'react';

class MenuSelector extends Component {
    state = {
        active: false,
        menu: [
            {
                id: 1,
                fighterName: 'Goku',
                race: 'Sayian',
                specialAttack: 'Kamehameha Wave',
                img: 'https://nerdist.com/wp-content/uploads/2018/01/Dragon-Ball-Super-Goku.jpg'
            },
            {
                id: 2,
                fighterName: 'Vegeta',
                race: 'Sayian',
                specialAttack: 'Final Flash',
                img: 'https://imgmr.com/wp-content/uploads/2016/04/Vegeta-SSGSS-2.png'
            },
            {
                id: 3,
                fighterName: 'Gohun',
                race: 'Human',
                specialAttack: 'Masenko',
                img: 'https://techanimate.com/wp-content/uploads/2017/11/Why-does-Gohan-Have-so-much-Hidden-Power-1024x576.jpg'
            },
            {
                id: 4,
                fighterName: 'Krillin',
                race: 'Human',
                specialAttack: 'Destructo Disc',
                img: 'https://static3.srcdn.com/wordpress/wp-content/uploads/2016/09/Krillin-Destructo-Disk.jpg'
            },
            {
                id: 5,
                fighterName: 'Android 17',
                race: 'Android',
                specialAttack: 'Barrier',
                img: 'https://i.ytimg.com/vi/SzAiIy_Dnb4/maxresdefault.jpg'
            },
            {
                id: 6,
                fighterName: 'Jiren',
                race: 'Unknown',
                specialAttack: 'Eye Paralysis',
                img: 'https://vignette.wikia.nocookie.net/dragonuniverse/images/9/9c/Jiren.png/revision/latest/scale-to-width-down/2000?cb=20180211002429'
            },
            {
                id: 7,
                fighterName: 'Lord Beerus',
                race: 'God',
                specialAttack: 'Hakai',
                img: 'https://vignette.wikia.nocookie.net/dragonuniverse/images/3/30/Beerus2.png/revision/latest?cb=20170225064338'
            },
            {
                id: 8,
                fighterName: 'Cell',
                race: 'Android',
                specialAttack: 'Kamehameha Wave',
                img: 'https://static0.srcdn.com/wordpress/wp-content/uploads/Dragon-Ball-Z-Perfect-Cell.jpg'
            },
            {
                id: 9,
                fighterName: 'Frieza',
                race: 'Unknown',
                specialAttack: 'Finger Blasters',
                img: 'https://i.ytimg.com/vi/BkoOw_7JqKg/maxresdefault.jpg'
            },
            {
                id: 10,
                fighterName: 'Black Goku',
                race: 'Sayian',
                specialAttack: 'Ki Blade',
                img: 'https://pm1.narvii.com/6287/eafbdf4dc0ae1b58d3869b89be04bcd0712f7623_hq.jpg'
            },
        ]
    }
    toggleClass = (id) => {
        console.info(`Clicked item ${id}`, this);

        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    selectHandler = (id) => {
        console.info(`Clicked item ${id}`);
        console.info(this);

    }

  render() {
    return (
      <div className = "container">
        <h1>Menu Selector</h1>
        <div>
        <ul>
            {this.state.menu.map((dragonball, index) => (
                <li key = {index} onClick = {() => this.toggleClass(dragonball.id)} className = {this.state.active ? 'hover': null}>
                <div className = "container-dragonball">
                <div className = "dragonball-stats">
                <h1>{dragonball.fighterName}</h1>
                <p>Race: {dragonball.race}</p>
                <p>Special Attack: {dragonball.specialAttack}</p>
                </div>
                <div className = "dragonball-img"><img src = {dragonball.img} alt = {dragonball.fighterName} /></div>
                </div>
                </li>
            ))}
            </ul>
        </div>
      </div>
    );
  }
}

export default MenuSelector;