Bootstrap stretched-link on custom element

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"}>
                            <a href={"#"} className="stretched-link menu-text">Home</a>
                        </div>
                        <div className={"menu-button d-flex w-100 position-relative justify-content-center align-items-center"}>
                            <a href={"#"} className="stretched-link menu-text">About</a>
                        </div>
                        <div className={"menu-button d-flex w-100 position-relative justify-content-center align-items-center"}>
                            <a href={"#"} className="stretched-link menu-text">Contact</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Menu;