Passing dynamic component data Laravel

so i new in laravel, i have a table of products lists and i added a delete button and when i click it, it show a basic yes/no modal.

so my problem is when i try to pass url dan id data to my modal component, i already put my modal component inside a @forEach loop but for some reason when i log the the id data inside the modal component it only shows the first data id in every product and not showing other id when i click another product

this is my index.blade.php where i call modal component

    @foreach ($products as $product)
                        <tr
                            class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                            <td scope="row" class="px-6 py-4">{{ $loop->iteration }}</td>
                            <th scope="row"
                                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                {{ $product->name }}
                            </th>
                            <td class="px-6 py-4">
                                {{ $product->color }}
                            </td>
                            <td class="px-6 py-4">
                                {{ $product->category->name }}
                            </td>
                            <td class="px-6 py-4">
                                Rp {{ number_format($product->unit_price, 0, ',', '.') }}
                            </td>
                            <td class="px-6 py-4 flex space-x-2">

                                <a href="/dashboard/products/{{ $product->name }}/edit" class="">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                                <x-modal url="/dashboard/products/" :id="$product->id" />

                                <button data-modal-target="popup-modal" data-modal-toggle="popup-modal"><i
                                        class="bi bi-x-circle"></i></button>
                            </td>
                        </tr>
                    @endforeach

this is my Modal class component

<?php

namespace AppViewComponents;

use IlluminateContractsViewView;
use IlluminateViewComponent;

class Modal extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct(
        public string $url,
        public string $id,
    ) {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View
    {
        return view('components.modal');
    }
}

and my modal component just like this

          {{ $url }}{{ $id }}

any ideas?