in my Laravel Filament v3 resource i have three Livewire custom components. The edit page loads with components, so far so good. But when i do something unrelated, for instance opening a delete confirmation modal (can also be clicking on relation tab), two of the components break with error message:
livewire.js?id=239a5c52:4437 Uncaught Snapshot missing on Livewire component with id: jMDrgTOxz321azWwuPDI

When i just have one component on the page there is no problem at all. So, it seems the DOM can’t keep track of which component is which. How do i fix this?

I tried adding a ->key(‘component-one’) to each component (suggested by chatgpt4) but didn’t help.

I simplified my setup and the problem still exists. Simplified setup:

public static function form(Form $form): Form {
    return $form->schema([
        Livewire::make('component-one'),
        Livewire::make('component-two'),
        Livewire::make('component-three'),
    ])
}

Each component has a Class in AppLivewire:

<?php
namespace AppLivewire;
use LivewireComponent;

class ComponentOne extends Component
{
    public function render(){
        return view('livewire.component-one');
    }
}

And a blade file component-one.blade.php:
<div>Hi i a component 1</div>