stretched-link not working on a div > a href (react)

Question

I am trying to get a stretched-link to work without success. I have tried to add the class and set the position-relative to a parent div as requested by Bootstrap docs, and it's not working. I also tried to set the same z-index to the parent div and the link as I have seen people making it work this way, yet nothing for my case. I have the following code:

<div className="position-relative linkDiv">
        <a href="#AboutPage" className="stretched-link linkAbout">
          <div class="container">
            <div class="chevron"></div>
            <div class="chevron"></div>
            <div class="chevron"></div>
          </div>
        </a>
      </div>

and the css set as:

.linkAbout {
  z-index: 3;
}

.linkDiv {
  z-index: 3;
  position: relative;
}

If that's a matter, I didn't forget to @import "~bootstrap/scss/bootstrap"; to my scss file...

Any idea how to get me out of this? Thanks in advance :)

I have tried to add the class and set the position-relative to a parent div as requested by Bootstrap docs, and it's not working. I also tried to set the same z-index to the parent div and the link as I have seen people making it work this way, yet nothing for my case.