Passing Id to be used in controller via datatables ajax property

Im trying to get products variants using the product's id in the controller and displaying them using datatables server side processing as follows

      $("#productVariants").DataTable({
responsive: true,
lengthChange: false,
autoWidth: false,
dom: "Bfrtip",
buttons: ["pageLength", "copy", "csv", "excel", "pdf", "print"],
processing: true,
serverSide: true,
ajax: {
url: "/shop/product/variants/",
type: "GET",
'data': {
id: $("#productVariants").attr("rel"),
},
},
columns: [
{ data: "description", name: "description" },
{ data: "cost", name: "cost" },
{ data: "status", name: "status" },
{ data: "id",
render: function(data, type, row) {
return (
'<div class="dropdown dropdown-action">' +
'<a href="#" class="action-icon dropdown-toggle"'+ 
'data-toggle="dropdown" aria-expanded="false">'+
'<i class="fa fa-ellipsis-v"></i></a>' +
'<div class="dropdown-menu dropdown-menu-left">' +
'<a href="/shop/product/variants/' +
data +
'/edit"' +
'class="dropdown-item" data-toggle="tooltip"' +
'data-placement="top" title="Edit">' +
'<i class="fa fa-pen"' +
'aria-hidden="true"></i> Edit</a>' +
'<a rel="' +
data +
'" rel1="delete" href="javascript:"' +
'class="dropdown-item deleteProductVariant"' +
'data-toggle="tooltip" data-placement="top" title="Delete">' +
'<i class="fa fa-trash"></i> Delete</a>' +
"</div>" +
"</div>"
);
},
name: "Action",
orderable: false,
searchable: false,
printable: false
}
],
stateSave: true,
bDestroy: true
});

I do have a route configured as follows

      Route::get('/variants/{id}', [ProductController::class, 'variants']);

In the controller, the function gets the id from the route as follows

      if ($request->ajax()) {
$data = $data = ProductVariant::join('statuses','product_variants.status_id',
'statuses.id')->join('variant_types','product_variants.variant_type_id',
'variant_types.id')->join('variant_categories','variant_types.cat_id',
'variant_categories.id')->select('product_variants.id As id',
'variant_types.name As name','product_variants.cost As cost',
'variant_categories.name As category', 'statuses.name As status')
->where(['product_variants.p_id'=>$id])->get();
return Datatables::of($data)->addIndexColumn()->make(true);
}

When I run it I get the following error in the console

       GET http://127.0.0.1:8000/shop/product/variants/?draw=1&columns%
5B0%5D%5Bdata%5D=category&columns%5B0%5D%5Bname%
5D=category&columns%5B0%5D%5Bsearchable%5D=true&columns%
5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue
%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1
%5D%5Bdata%5D=name&columns%5B1%5D%5Bname%5D=name&columns
%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable
%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1
%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata
%5D=cost&columns%5B2%5D%5Bname%5D=cost&columns%5B2%5D%
5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&
columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%
5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=
status&columns%5B3%5D%5Bname%5D=status&columns%5B3%5D%
5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&
columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5
Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=id&
columns%5B4%5D%5Bname%5D=Action&columns%5B4%5D%5Bsearchable
%5D=false&columns%5B4%5D%5Borderable%5D=false&columns%
5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D
%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%
5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&
search%5Bregex%5D=false&id=742&_=1677158506437 404 (Not Found)

from my understanding, a new URL is being formed which is not found yet I expected the supplied URL to be used and the id passed just like is done in laravel routing.
How can I get to pass the id correctly and achieve the desired output?

For anyone having the same issue, here is how I solved the problem.
I changed the route method to post removing the id variable from the route
I then changed the datatable code as follows

        $("#productVariants").DataTable({
responsive: true,
lengthChange: false,
autoWidth: false,
dom: "Bfrtip",
buttons: ["pageLength", "copy", "csv", "excel", "pdf", "print"],
processing: true,
serverSide: true,
ajax: {
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: "/shop/product/variants/",
type: "POST",
'data': {
id: $("#productVariants").attr("rel"),
},
},
columns: [
{ data: "category", name: "category" },
{ data: "name", name: "name" },
{ data: "cost", name: "cost" },
{ data: "quantity", name: "quantity" },
{ data: "status", name: "status" },
{ data: "id",
render: function(data, type, row) {
return (
'<div class="dropdown dropdown-action">' +
'<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>' +
'<div class="dropdown-menu dropdown-menu-left">' +
'<a href="/shop/product/variants/' +
data +
'/edit"' +
'class="dropdown-item" data-toggle="tooltip"' +
'data-placement="top" title="Edit"><i class="fa fa-pen"' +
'aria-hidden="true"></i> Edit</a>' +
'<a rel="' +
data +
'" rel1="delete" href="javascript:"' +
'class="dropdown-item deleteProductVariant"' +
'data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i> Delete</a>' +
"</div>" +
"</div>"
);
},
name: "Action",
orderable: false,
searchable: false,
printable: false
}
],
stateSave: true,
bDestroy: true
});

Note that the only significant change is the change of method to post