ReactJS - Hover selector not working properly?

I am building a Projects section using ReactJS. See below, I have one laptop image and I am fitting the project's image on the screen of the laptop image by making it display absolute. After that, the project links section should visible on hover to the project's image.

<div className='project'>
  <img className='laptop-img' src='assets/images/laptop_bg.png' />
  <img className='project-img' src={props.src} />
  <div ref={links} className='project-links'>
    <a href={props.gitHubUrl} target="_blank">See GitHub Repo</a>
    <a href={props.liveSiteUrl} target="_blank">See Live Site</a>
  </div>
</div>

But, when I run this code, the project links section is only visible when I continuously move my mouse over the project image and also visible when I click on the project's image.

I want it to have a simple hover effect.

.project {
  position: relative;
  max - width: 500px;

  .laptop - img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100 %;
    z - index: 3;
  }

  .absolute {
    position: absolute;
    top: 1rem;
    left: 50 %;
    width: 374px;
    height: 235px;
  }

  .project - img {
    @extend.absolute;
    transform: translateX(-50 %);
    z - index: 8;
  }

  .project - links {
    @extend.absolute;
    @include flex(column);
    z - index: 12;
    transform: scale(0) translateX(-50 %);
    gap: 2rem;
    background - color: $third - clr;

    a {
      border: 2px solid currentColor;
      padding: 5px 10px;
      display: block;
      color: $first - clr;
    }
  }

  .project - img: hover+.project - links {
    transform: scale(1) translateX(-50 %) !important;
  }
}