I'm having the same problem 'Undefined variable $payment' even using Livewire\Volt\Component'

<?php

use Livewire\Volt\Component;

new class extends Component
{
    public string $payment = 'cc'; 

    public function subscription()
    {
        //TODO
    }
    
}

?>
<x-layouts.app :title="__('Subscription')">
    <form wire:submit="subscription" class="flex flex-col gap-6">
        
        <flux:select size="sm" wire:model.live="payment" :label="__('Select your payment method')">
            <flux:select.option value="cc">{{ __('Credit Card') }}</flux:select.option>
            <flux:select.option value="pix">Pix</flux:select.option>
        </flux:select>

        @if ($payment === 'cc')
            <div wire:key="credit-card-fields">
                <label for="card-number">Número do Cartão</label>
                <input type="text" id="card-number" name="card_number" placeholder="Número do Cartão">

                <label for="card-holder">Nome do Titular</label>
                <input type="text" id="card-holder" name="card_holder" placeholder="Nome do Titular">

                <label for="card-expiry">Data de Expiração</label>
                <input type="text" id="card-expiry" name="card_expiry" placeholder="MM/AA">
            </div>
        @endif
       
        @if ($payment === 'pix')
            <div wire:key="pix-details" class="pix-details">
                <p>Escolha a opção Pix para realizar o pagamento.</p>
            </div>
        @endif

        <button type="submit">Assinar</button>
    </form>
</x-layouts.app>