Replacing <a> with <Link> breaks my NavBar - reactjs

Question

I have this bootstrap NavBar that works perfectly with "a", but when I try to replace the "a" with "Link" from React it pretty much breaks the app, the Navbar stops showing. Is it because of the Bootstrap? I saw a video from youtube that this works, maybe with newer versions this doesn't work?
import React from "react";
import { Link } from "react-router-dom";
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<div>
<img width="100" src="/assets/images/logo.jpg"></img>
</div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link" to="/">Home</Link> <----------------here for ex.
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Productos
</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Nosotros
</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Contacto
</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

Judging from the href attribute in your <a> components, I believe you are trying to access a component on the same page using hashes.
Link from react-router-dom does not actually support this feature from what I know. Instead, I suggest installing react-router-hash-link which supports it.
The import can look like
import { HashLink as Link } from 'react-router-hash-link';
And you can have the same component attributes
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/#productos">
Productos
</Link>
</li>

Answer 2

You need to enclose your <NavLink/>, <Link/>, <Routes/> and <Route/> components with a Router like <BrowserRouter/>.
So in App.js or another top level component, you need to do it like this:
const App = (props) => {
<BrowserRouter>
<Your sidebar component including NavLink elements/>
<Your app module including Route elements/>
</BrowserRouter>
}