live() deletes my cropper instance, custom field

 ImageCropper::make('coordinates')
->image(fn (CreateMapping $livewire) => Storage::disk('public')->url($livewire->getMapType()->preview))
->columnSpan(3)
->default('0, 0, 0, 0')
->afterStateUpdated(function(Set $set, string $state) 
  {
    [$x, $y, $width, $height] = explode(', ',$state);
    $set('x', $x);
    $set('y', $y);
    $set('width', $width);
    $set('height', $height);
  })
->live()

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;
use Filament\Forms\Get;
use Illuminate\Support\Facades\Storage;

class ImageCropper extends Field
{
    protected string $view = 'forms.components.image-cropper';

    public $image;


    public function image(string|\Closure|null $image) :static
    {
        $this->image = $image;
        return $this;
    }

    public function getImageUrl(): ?string
    {
        if($result = $this->evaluate($this->image))
        {
            return $result;
        }
        return null;
    }
}

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div ax-load
        ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('image-cropper-cropperjs') }}"
        x-data="imageCropper({
        state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }},
        })">
        <!-- Interact with the `state` property in Alpine.js -->

        <input x-ref="arrayState" class="text-black" x-model='state'/>

        <img id="image" src="{{ $getImageUrl() }}" alt="Picture">

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

import Cropper from 'cropperjs';

export default function imageCropper({
    state,
}) {
    let component = null;
    let cropper = null;
    let image = null;
    let canvas = null;
    let selection = null;
    return {
        state,

        init: function () {
            component = this;
            cropper = new Cropper('#image');
            canvas = cropper.getCropperCanvas();
            image = cropper.getCropperImage();
            selection = cropper.getCropperSelection();
            selection.zoomable = false;
            image.scalable = false;


            canvas.classList.add("aspect-square");

            // Function to handle Cropper.js event
            function handleSelectionChange(event) {
                component.state = selection.x + ', ' + selection.y + ', ' + selection.width + ', ' + selection.height;
            }

            selection.addEventListener('change', handleSelectionChange);

            console.log(state);
            console.log(cropper);
            console.log(canvas);
            console.log(selection);
            console.log('done!');

        },
    }
}