仅渲染选定的元素，React JS

Question

我正在尝试在我的一个反应组件中切换类。 想法是在鼠标进入时添加类，并且当鼠标仅在元素中仅留下用户执行操作的元素时删除类。然而情况并非如此，因为当执行动作时，具有该功能的所有元素的行为都相同。

到目前为止，这是我的代码：

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>
    );
  }
}

我已经阅读了文档中密钥的使用并阅读了其他问题，特别是这个问题LINK，但是当我尝试实现时，我没有得到理想的结果。

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

修改

这就是我现在所得到的。

正如您在我悬停两个元素触发器时所看到的那样。

这是我的CSS代码：

/*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;
}