I am trying to toggle class in one of my react component. The idea is to add class when the mouse enter and to remove the class when the mouse leave only in the element only the element in where the user perform the actions. However this is not the case as when the action is being performed all the element with the function are behaving equally.

This is my code so far:

export default class Projects extends Component{
  constructor(){
    super();
    this.state = {
      isHovered : false
    }
  }
  //handle mouse enter
  handleMouseEnter = () =>{
    this.setState({
      isHovered : true
    });
  }
  //handle mouse leave
  handleMouseLeave = () =>{
    this.setState({
      isHovered : false
    });
  }
//render component
  render(){
    let display = "";
    if(this.state.isHovered === true){
      display = "active";
    }else{
      display = "disable";
    }

    return(
      <section className="projects">
        {/*section project wrapper*/}
        <div className="p-wrapper">
            <h1 className="title">Projects</h1>
            <hr/>
            {/*projet wrapper*/}
            <div className="projects-wrapper">
              {/*project item wrapper*/}
              <div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*FMA Web development*/}
                <div className={"p-description " + display}>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
                </div>
                <div className="p-image">
                  <img src="asset/img/fma_web.png" alt="FMA Web Development"/>
                </div>
              </div>
              <div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Web development using php*/}
                <div className={"p-description " + display}>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
                </div>
                <div className="p-image">
                  <img src="asset/img/web_dev_php.png" alt="FMA Web Development Using PHP"/>
                </div>
              </div>
              <div className="project-item" onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>{/*Movie Catalog*/}
                <div className={"p-description " + display}>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quos dolorem, ipsa eaque minima saepe fugit hic libero recusandae! Obcaecati esse odit id incidunt vitae aperiam dicta atque blanditiis sint?</p>
                </div>
                <div className="p-image">
                  <img src="asset/img/movie_catalog.png" alt="Movie Catalog"/>
                </div>
              </div>
            </div>
        </div>
      </section>
    );
  }
}

I have read the use of key in the documentation and read other question especially this one LINK,however when I try to implement I do not get the desired result.

===========================

EDIT

This is what I get now.

As you can see when I hover both of the element triggers.

This is my CSS Code:

/*Projects Start*/
.projects{
  width: 100%;
}

.p-wrapper{
  margin: 0 auto;
  width: 90%;
  height: 100%;
}
.projects-wrapper{
  margin-top: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.project-item{
  margin: 1rem;
  width: 30%;
  position: relative;
  box-shadow: 2px 3px 37px -5px rgba(0,0,0,0.84);
}
.p-description{
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(43, 40, 40, 0.61);
  color: white;
}
.p-description p {
  margin: 1rem;
}
.p-title{
  margin: 1rem;
}
.active{
  display: block;
  transition: all 2s ease-in;
}
.disable {
  display: none;
}