Routing not working - React with Inertia

I have an Index.js page which has a table that shows a list of customers with links to the Edit.js page to edit the customers. I have created the edit() and destroy() methods but when I try to go to the edit page, it routes to the edit page, however, this is what I get as the URI http://localhost:8000/customers/%7B%7D/edit?4=, yet instead I expect to get http://localhost:8000/customers/4/edit and when I try manually to route to this URI, it gives me HTTP:404, yet I have registered this route in my web.php file:

Route::prefix('customers')->name('customers.')->group(function () {
   Route::resource('/', CustomersController::class);
   Route::resource('.create', CustomersController::class);
   Route::get('.{customer}.edit', [CustomersController::class, 'edit']);
   Route::delete('.{customer}.destroy', [CustomersController::class, 'destroy']);
});

When I try dd($customer->id) in the edit() method, it gives me null. This is what I have in my CustomersController class:

public function edit(Customer $customer)
{
    if (Gate::allows('is-admin-designer')) return inertia('Customers/Edit', [
            'customer' => $customer
    ]);

    return abort(403);

    // return dd($customer->id);
 }

public function destroy(Customer $customer)
{
    if(Gate::allows('is-admin-designer')) {
       $customer->delete();

       return back()->with('message', 'The customer has been deleted successfully.');
    }

    return abort(403);

    // dd($customer->id);
}

In the front end, I have this:

const [customerId, setCustomerId] = useState(null);

const handleDelete = () => {
        Inertia.delete(route("customers.destroy", customerId));
        setConfirm(false);
};

<Link href={route("customers.edit", customer.id)} className="text-indigo-600 mr-3 hover:text-indigo-900">
      Edit
</Link>

/* this onClick() passes data and instructions to show <ModalDialog /> to carry on handleDelete() */
<button className="text-red-600 outline-none focus:outline-none active:outline-none hover:text-red-900 font-medium" onClick={() => {
                                setConfirm(true);
                                setCustomerId(customer.id);
                            }}
>
  Delete
</button>

The same error also goes for the destroy() method. I get null when I try to dd($customer->id). I cannot see where I'm going wrong.