What is the proper way for editing data in modal?

I'm using SPA style in list and form (modal), I already have index, create and remove function these are all working now the problem I face now is on edit.

1. How to pass the id on the event
2. How to fetch id from the listener

or Do you have any suggestion on proper way on editing and updating data in a modal

these are my initial setup

index.blade.php

    <button class="text-primary hover:text-primary" wire:click="editSample({{ $data->id }})">Edit</button

in index.php

 public function editSample($id)
    {
        $this->dispatch('edit-sample', id: $id);
        $this->isOpen = true; 
    }

and in the create.php

<?php

namespace App\Livewire\Sample;

use Livewire\Component;
use Livewire\Attributes\On;
use Illuminate\Support\Facades\Validator;
use App\Http\Requests\Admin\Sample\StoreRequest;
use App\Repositories\Contracts\SampleRepositoryInterface;

class Create extends Component
{

    public $formData = [
        'id' => '',
        'name' => '',
        'address' => ''
    ];

    public function close()
    {
        $this->dispatch('close-modal');
    }


    public function save()
    {
        $sampleRepository = app(SampleRepositoryInterface::class);

        $validatedData = Validator::make($this->formData, (new StoreRequest)->rules())->validate();

        $sampleRepository->create($validatedData);

        return redirect()->to('/sample')->with('status', 'Post created!');
    }

  
    #[On('edit-sample')]          
    public function edit(int $id) 
    {
        $sampleRepository = app(SampleRepositoryInterface::class);


        $sample = $sampleRepository->find($id);

        $this->formData = [
            'id' => $sample->id,
            'name' => $sample->name,
            'address' => $sample->address,
          ];

        $this->dispatch('open-modal');
    }

    public function render()
    {
        return view('livewire.sample.create');
    }

}