How do i trigger an element using hyper link in "React Router Dom" with "Link and to"?

Question

// the trigger button for modal;

        <div className="container">
            <div className="interior">
                <Link className="btn" to={"#open-modal"}> Basic CSS-Only Modal</Link>
            </div>
        </div>

// The modal;

            <div id="open-modal" className="modal-window">
                <div>
                    <Link to={"#"} title="Close" className="modal-close">Close</Link>
                    <h1>Modal Title</h1>
                    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum temporibus aperiam                           doloribus nisi blanditiis? Esse quae ipsam aliquid consequatur explicabo debitis tempora voluptas                repellendus rerum unde enim, sequi ullam recusandae?
                    </div>
                </div>
            </div>

I just want to trigger the modal but it's not working with React Router but when i tried this with simple HTMl tags like "" and "href" attribute, it worked perfectly. But it's not working with Link and to even my all imports are good. I also tried giving id to "to" attribute without hash "#" but it didn't worked