How to handle custom Repeaters relationship?

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data x-sortable {{ $attributes->merge($getExtraAttributes())->class(['fi-repeater space-y-2']) }}>
        <ul>
            @foreach ($getChildComponentContainers() as $uuid => $item)
                <li wire:key="{{ $this->getId() }}.{{ $item->getStatePath() }}.{{ $field::class }}"
                    x-sortable-item="{{ $uuid }}"
                    class="flex items-center gap-3 border p-2 rounded shadow-sm"
                >
                    {{-- Radio Button --}}
                    <div class="shrink-0">
                        <input type="radio" name="default_option" value="{{ $uuid }}"
                            {{ $attributes->merge(['wire:click' => "markDefaultOption('$uuid')"]) }}
                        />
                    </div>

                    {{-- Input Field --}}
                    <div class="flex-1">
                        {{ $item }}
                    </div>

                    {{-- Drag Handle --}}
                    <div x-sortable-handle class="cursor-move text-gray-500">
                        <x-heroicon-o-arrows-up-down class="w-5 h-5"/>
                    </div>

                    {{-- Delete Button --}}
                    <button type="button" wire:click="removeOption('{{ $uuid }}')"
                            class="text-red-500 hover:text-red-700">
                        <x-heroicon-o-trash class="w-5 h-5"/>
                    </button>
                </li>
            @endforeach
        </ul>

    </div>
</x-dynamic-component>