Unexpected behaviour onMouseOver onMouseLeave in Reactjs

I'm trying to build an easy website to practice React and the Dom but on a simple onMouseOver and onMouseLeave I start to have troubles. All I want is to hide the other letters of the name with a div when hovering on a letter, which will revert on the initial state when leaving the hover.

I managed to achieve the effect by rendering different divs only when the relative letter is active in the state, but it looks like it gives a flickering effect and unexpected behaviour. I don't know if it's because it's re-rendering and therefore loses the mouse-hover. Do you have any suggestion and explaination?

Here's a codepen with the practice https://codepen.io/anon/pen/JQLvQp

//example of a letter in css//
.L{
  display: flex;
  justify-content: space-between;
  font-size: 6rem;
  align-items: flex-start;
  height: 50vh;
  transform: translate(0rem, -15rem);
  width: 90%;
  margin: 0 auto;
  cursor: pointer;
}

#L1 {
  background-color: orangered;
  height: 9rem;
  flex: 1;
  animation: fadein1;
  animation-duration: 2s;

}

#L2 {
  height: 0;
  flex: 1;

}

#L3 {
  background-color: orangered;
  height: 9rem;
  flex: 5;  
  animation: fadein5;
  animation-duration: 2s;
}

@keyframes fadein1{
  0%{flex: 0}
  100%{flex: 1  }
}
@keyframes fadein5{
  0%{flex: 0}
  100%{flex: 5  }
}

// here's the actual code //

import './App.css';
import React, { Component } from 'react';



class Home extends Component {
  constructor(props) {
    super(props)

    this.funzionina = () => {
      console.log("casa")
    }

    this.state = {
      A: false,
      L: false,
      E: false,
      S: false,
      SS: false,
      I: false,
      O: false,
    }


  }


  render() {
    return (
      <div className="papa" >
        <div className="App">
          <div onMouseOver={() => { this.state.A === false ? this.setState({ A: true }) : console.log("Casa") }} onMouseLeave={() => this.setState({ A: false })}><h2> A</h2></div>
          <div onMouseOver={() => this.setState({ L: true })} onMouseLeave={() => this.setState({ L: false })}><h2> L</h2></div>
          <div onMouseOver={() => this.setState({ E: true })} onMouseLeave={() => this.setState({ E: false })}><h2> E</h2></div>
          <div onMouseOver={() => this.setState({ S: true })} onMouseLeave={() => this.setState({ S: false })}><h2> S</h2></div>
          <div onMouseOver={() => this.setState({ SS: true })} onMouseLeave={() => this.setState({ SS: false })}><h2> S</h2></div>
          <div onMouseOver={() => this.setState({ I: true })} onMouseLeave={() => this.setState({ I: false })}><h2> I</h2></div>
          <div onMouseOver={() => this.setState({ O: true })} onMouseLeave={() => this.setState({ O: false })}><h2> O</h2></div>
        </div>
        {this.state.A && <div className="A"> <div id="A1"> </div> <div id="A2"> </div> <div id="A3"> </div> </div>}
        {this.state.L && <div className="L"> <div id="L1"> </div> <div id="L2"> </div> <div id="L3"> </div> </div>}
        {this.state.E && <div className="E"> <div id="E1"> </div> <div id="E2"> </div> <div id="E3"> </div> </div>}
        {this.state.S && <div className="S"> <div id="S1"> </div> <div id="S2"> </div> <div id="S3"> </div> </div>}
        {this.state.SS && <div className="SS"> <div id="SS1"> </div> <div id="SS2"> </div> <div id="SS3"> </div> </div>}
        {this.state.I && <div className="I"> <div id="I1"> </div> <div id="I2"> </div> <div id="I3"> </div> </div>}
        {this.state.O && <div className="O"> <div id="O1"> </div> <div id="O2"> </div> <div id="O3"> </div> </div>}

      </div >

    )
  }

}

export default Home;

Using onMouseOver or onMouseLeave on a DOM element react to any sort of movement from a user action. So in a sense you're instructing state to update as many times as the user is moving the mouse -- which creates that flickering.

You might want to add a debounce to your handlers in order to prevent a continuous updates of your state.

Here's an example on how to implement that: https://codepen.io/snesjhon/pen/ewMKdG

Here's more explanation about the debounce function: Can someone explain the "debounce" function in Javascript