I'm currently working on a React project that displays a list of data in a child component and clicking on any individual piece of data would route the web app to a component with more details.

However, in order to display the data I need to sort the data based on some other information. As such, once this information is sorted I ideally would want to render an array of Link elements to replace a div that contains all of the data. However, when trying to render() I keep getting an error that "Error: Invariant failed: You should not use Link outside a BrowserRouter". I think this occurs because the render method does not recognize that the div being rendered is inside a BrowserRouter element created in the parent component.

Is there any way to get past this? If it helps, my react version is 17.0.2 and I think my react-router-dom version is 3.

EDIT: I apologize for some of the typos that occurred, I posted in a hurry. Here's a link to a codesandbox: https://codesandbox.io/s/react-playground-forked-34k2j?from-embed

If you comment out the link element inside the update() function, replacing the element works fine. It's just when a Link is created even though it is wrapped by a BrowserRouter in the parent component.