Как добавить «Реагирующий маршрутизатор» ‹Link› в таблицу материалов?

Я использую библиотеку таблиц материалов - это Datatable на основе Material-UI Table.

Таблица данных имеет свойства редактируемого и добавляет новую запись в ту же таблицу, но я не хочу делать это в той же таблице.

Мне нужно использовать кнопку, потому что я хочу, чтобы она открывала материальное меню пользовательского интерфейса. Однако я не знаю, как добавить ссылку или что-то подобное.

Я попробовал это с помощью следующего фрагмента кода, но он говорит мне, что ссылка не определена, хотя это имеет значение

import React, { useState, useEffect } from 'react';
import MaterialTable from 'material-table';
import EditIcon from '@material-ui/icons/Edit';
import { IconButton } from '@material-ui/core';
import  axios  from 'axios';
import { Link} from 'react-router-dom';

export default function TableProducts() {

const url='/api/products';

const [product, setProduct]= useState({Products:[]});


 useEffect(()=>{
    const getProduct=async()=>{
            const response =await axios.get(url);
            setProduct(response.data);
    }
    getProduct();
},[]);

  return (

<MaterialTable
      title="Products"
      columns={[
        {title: 'id',field: 'id', type: 'numeric', hidden:'false'},
        { title: 'nameproduct',field: 'nameproduct', },
        { title: 'description', field: 'description' },
        { title: 'price', field: 'price' },
      ]} 
      data={product.Products}
      options={{
        filtering: true,
        sorting: true
      }}
      actions={[
        {
          icon: 'edit',
          tooltip: 'Edit ',
          onClick: () => 
            <Link to={`/product/${data._id}/edit`}>Edit</Link> 

        }
      ]}
      />

    );
  }

Я хочу сделать что-то подобное

                <Link
                    to={`/product/edit/${product.id}`}
                    className="btn btn-success mr-2">Editar
                </Link>