Wire:click not working at all

I am using multistep form for a quiz which has a $currentStep property livewire component

class QuizSection extends Component
{
    public $currentStep = 1;

    public function next()
    {
        $this->currentStep++;
        dd($this->currentStep);
    }

    public function previous()
    {
        $this->currentStep--;
        dd($this->currentStep);
    }

    public function submit()
    {   
        dd($this->currentStep);
    }
    public function render()
    {
        return view('livewire.quiz-section');
    }
}

the form

<form wire:submit.prevent="submit()" action="" method="POST">
    @csrf
    <div @class(['hidden' => $currentStep != 1])>
       ..................
    </div>
    <div @class(['hidden' => $currentStep != 2])>
	........................
 	</div>
    <div class="text-end mt-10">
        <button wire:click="previous()" class="py-1 px-3 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Previous</button>

        {{-- <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            Next
            <svg aria-hidden="true" class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button> --}}
        <button wire:click="next()" class="text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm py-1 px-3 text-center mr-2 mb-2 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800">Next</button>
    </div>
</form>

the next() and previous() are not working at all