Bootstrap stretched-link on custom element - html

Question

I am struggling with stretched-link. I've wanted to make a div with class menu-button working as a link, but clearly I am doing something wrong. Can anyone explain to me how to do it properly?
Here is the code:
import {BsHouseDoor} from 'react-icons/bs';
const Menu = () => {
return (
<div className={"menu container-fluid"}>
<div className={"row h-100"}>
<div className={"col-4"}>
<div className="d-flex align-items-center h-100 pl-3">
<BsHouseDoor className={"logo-icon"}/>
<span className={"logo-title ml-3"}>Some name</span>
</div>
</div>
<div className={"col-5"}>
<div className={"d-flex justify-content-around h-100"}>
<div className={"menu-button d-flex position-relative w-100 justify-content-center align-items-center"}>
Home
</div>
<div className={"menu-button d-flex w-100 position-relative justify-content-center align-items-center"}>
About
</div>
<div className={"menu-button d-flex w-100 position-relative justify-content-center align-items-center"}>
Contact
</div>
</div>
</div>
</div>
</div>
);
}
export default Menu;