Why is react not letting me use a router dom Link inside of an html list item?

I have the following Link within a html list item and I am getting an error.

<li className="nav-item">
  <Link to={'/cart'}>
    <i
      className="fa fa-shopping-bag"
      style={{fontSize: "22px"}}></i>
  </Link>
</li>

The error:

index.tsx:19 Uncaught Error: useHref() may be used only in the context of a <Router> component.

>Solution :

Because somewhere, farther up on the tree you did not wrap your components in a router component, which is required to make react router work.

See: https://v5.reactrouter.com/web/guides/quick-start/1st-example-basic-routing