Неожиданное поведение onMouseOver onMouseLeave в Reactjs

Я пытаюсь создать простой веб-сайт для практики React и Dom, но на простых onMouseOver и onMouseLeave у меня начинаются проблемы. Все, что я хочу, это скрыть другие буквы имени с помощью div при наведении на букву, которая вернется в исходное состояние при выходе из наведения.

Мне удалось добиться эффекта путем рендеринга разных div только тогда, когда относительная буква активна в состоянии, но похоже, что это дает эффект мерцания и неожиданное поведение. Я не знаю, может быть, это потому, что он перерисовывается и поэтому теряет наведение мыши. Есть ли у вас какие-либо предложения и объяснения?

Вот codepen с практикой 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.info("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.info("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;