React - menu po najechaniu na wyrenderowanych elementach

import React, { Component } from 'react';
import menu from '../Images/menu.png';



class Container extends Component {
    constructor(props) {
        super(props);
        this.menuEnter = this.menuEnter.bind(this);
    }

    state = {
        servers: [],
        serverId: [],
        serverName: '',
        serverStatus: '',
        isVisible: false,
    };


    componentDidMount() {
        fetch('http://localhost:4454/servers')
            .then(response => response.json())
            // .then(data => console.log(data))

            .then(data => {
                this.setState ({
                    servers: data,
                    serverId: data.id,
                    serverName: data.name,
                    serverStatus: data.status,
                    isVisible: false
                }, console.log(this.state.servers))
            })
            .catch(error => console.log(error))
    }

    componentDidUpdate() {
        console.log(this.state.servers);
    }


    menuEnter = () => {
        console.log('Działa');
       this.setState(prevState => ({ isVisible: !prevState.isVisible }));
    };





    render() {

        const {isVisible} = this.state;
        return(
            <div className="prostok-t-1">
                <section className='grupa-1'>
                    <div className='title'>
                        <input className='form' type="text" placeholder='Search'/>
                        <h2 className='servers'>Servers</h2>
                        <h3 className='number-of-elements-16'>Numbers of elements: 16</h3>
                    </div>
                    <div className='prostok-t-4'>
                        <div className='place'>
                            <div className="name">
                                <h3>Name</h3>
                            </div>
                            <div className="condition">
                                <h3>Status</h3>
                            </div>
                        </div>

                        <div>{this.state.servers.map((server) => {
console.log(server);


                            return (
                        <div className="server" key={server.id}>
                                        <p className="area">{server.name}</p>
                                        <p className="status">{server.status}</p>
                                        <img onMouseOver={() => this.menuEnter(server.id)} className='menu' src={menu} alt="menu"/>
                                        <ul className={`box ${isVisible ? "menuEnter" : " submenu"}`}>
                                            <li>Turn on</li>
                                            <li>Turn off</li>
                                            <li>Reboot</li>
                                        </ul>
                                    </div>
                                )

                            })}
                        </div>
                    </div>
                </section>
            </div>
        )
    }
}

export default Container;

 menuEnter = e => {  //gdzie e to najechany element
        
      
        tu  ustawiasz klasy dla elementu ul // ul to jest kolejny element po e
    };

<img onMouseOver={this.menuEnter)} className='menu' src={menu} alt="menu"/>

servers: data,
serverId: data.id,
serverName: data.name,

```    menuEnter = (e) => {
        console.log('Działa');
       e.nextSibling.setState(prevState => ({ isVisible: !prevState.isVisible }));
    };

menuEnter = (e) => {
      
       let submenu= e.domEvent.target.nextSibling;
//i teraz manipulujesz klasami
   };