React Router error You should not use <Link> outside a <Router> when using Link before Return in Component when using Datatable

My Application using React v17.0.2 react-router-dom v5.2.0", @ashvin27/react-datatable v1.5.3

So the datatable has built in features to download data into excel But when i click the button it causes this error Error: Invariant failed: You should not use outside a

Here is the codesandbox link : https://codesandbox.io/s/link-outside-datatable-eo6d3

here is my Code Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import "bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/font-awesome/css/font-awesome.min.css";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import AppRoutes from "./AppRoutes";
import { Container } from "reactstrap";
const App = () => {
  return (
    <>
    <Container>
      <AppRoutes />
    </Container>
    </>
  );
}

AppRoutes.jsx

import { Switch, Route } from "react-router-dom";
import Pages from "./Pages";

const AppRoutes = () => {
    return (
        <Switch>
            <Route path="/">
                <Pages />
            </Route>
      </Switch>
    )
}

export default AppRoutes

Tables.jsx

import Tables from "./Tables"
import ShowData from "./ShowData";
import records from "./records.json"
import { useRouteMatch } from "react-router-dom";
import { Link, Switch, Route } from "react-router-dom";
import { useState } from "react";

const Pages = () => {
    const { path } = useRouteMatch();
    const [data, setData] = useState("")
    const columns = [
        {
            key: "name",
            text: "Name",
            className: "name",
            sortable: true
        },
        {
            key: "address",
            text: "Address",
            sortable: true
        },
        {
            key: "action",
            text: "Action",
            cell: (record, index) => {
                return (
                    <>
                        <Link to={`/view/${index}`}>
                            <button
                                className="btn btn-primary btn-sm"
                                style={{marginRight: '5px'}}
                                onClick={setData(record)}>
                                    Show Data
                            </button>
                        </Link>
                    </>
                );
            }
        }
    ];

    return (
        <>
        <Switch>
            <Route exact path={path}>
                <Tables records={records} columns={columns} />
            </Route>
            <Route exact path={`/view/:id`}>
                <ShowData data={data}/>
            </Route>
        </Switch>
        </>
    )
}

export default Pages

Tables.jsx

import ReactDatatable from '@ashvin27/react-datatable';

const Tables = ({records,columns}) => {
    
    const config = {
        page_size: 10,
        length_menu: [10, 20, 50],
        show_filter: true,
        show_pagination: true,
        filename: "restaurents",
        button: {
            excel: true,
            print: true,
            csv: true
        }
    }

    return (
        <div>
            <ReactDatatable
                config={config}
                records={records}
                columns={columns}/>
        </div>
    )
}

export default Tables

ShowData.jsx

const ShowData = ({data}) => {
    return (
        <div>
            <h1>Data</h1>
            <h2>Name : {data.name}</h2>
            <h2>Addres : {data.address}</h2>
        </div>
    )
}

export default ShowData

The error was when i using this inside Pages.jsx . I can navigate to the ShowData Page, but i cant download to excel.

{
        key: "action",
        text: "Action",
        cell: (record, index) => {
            return (
                <>
                    <Link to={`/view/${index}`}>
                        <button
                            className="btn btn-primary btn-sm"
                            style={{marginRight: '5px'}}
                            onClick={setData(record)}>
                                Show Data
                        </button>
                    </Link>
                </>
            );
        }
    }

But if i give i can download the files, but i can't navigate to the "/view/${index}"

{
    key: "action",
    text: "Action",
    cell: (record, index) => {
        return (
            <>
                <BrowserRouter>
                    <Link to={`/view/${index}`}>
                        <button
                            className="btn btn-primary btn-sm"
                            style={{marginRight: '5px'}}
                            onClick={setData(record)}>
                                Show Data
                        </button>
                    </Link>
                </BrowserRouter>
            </>
        );
    }
}

Here is the screenshot The Excel Download button is the right side of the search bar.

Do you guys have any solution? Thank you before!