Laravel Filament - Custom Field - Call function

Hi there,

I'm working on a Laravel Filament project and have created a custom field to show/hide tokens and with a method to regenerate a new token. Everything is good to show/hide; however, I can't call the function to refresh the token.

Here is the documentation for creating a custom field: https://filamentphp.com/docs/2.x/forms/fields#building-custom-fields

Below is my code:

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class TokenField extends Field
{
    protected string $view = 'forms.components.token-field';

    public function refreshToken()
    {
       $this->state('123456');
    }
}

Here is the toke-field.blade.php

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :id="$getId()"
    :label="$getLabel()"
    :label-sr-only="$isLabelHidden()"
    :helper-text="$getHelperText()"
    :hint="$getHint()"
    :hint-action="$getHintAction()"
    :hint-color="$getHintColor()"
    :hint-icon="$getHintIcon()"
    :required="$isRequired()"
    :state-path="$getStatePath()"
>
    @if($getState())
        <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer,  show: false,  refresh() { {{$refreshToken()}} } }">
            <div class="flex items-center flex-row h-5 pt-2">
                <button @click="show = ! show" class="mr-2">
                    <div x-show="show">
                        <x-heroicon-s-eye-off class="w-5 h-5 text-gray-700"/>
                    </div>
                    <div x-show="!show">
                        <x-heroicon-s-eye class="w-5 h-5 text-gray-700"/>
                    </div>
                </button>
                <p x-show="show" class="form-control-static w-32">{{$getState()}}</p>
                <div x-show="! show">
                    <div class="flex items-center space-x-1 rtl:space-x-reverse flex-row w-32">
                        @foreach(str_split($getState()) as $char)
                            <div class="w-1 h-2 flex items-center">
                                <svg class="text-gray-700 fill-current" viewBox="0 0 8 8">
                                    <circle cx="4" cy="4" r="4"/>
                                </svg>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <button @click="refresh" class="mr-2">Refresh token</button>
        </div>
    @endif
</x-dynamic-component>

I achieved a way to refresh the token by creating a new Livewire component on top of the Filament custom field, but I believe my solution is a workaround.

Any help will be much appreciated.

Cheers,