How to avoid resetting all fields on edit form when opening new pop-up component?

Hello guys, I edit user information and want to add referral id by opening new popup modal (component) and pass the id to previous component which is my edit component but when I open the new pop-up component the fields of the previous was resetting..

This is my edit component form

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Spatie\Permission\Models\Role;
use Illuminate\Support\Facades\Hash;
use App\Models\User;

class UserForm extends Component
{
    public $slug, $userId, $last_name, $first_name, $middle_name, 
    $address, $contact_no, $username, $email, $password, $user_id;

    public $roles = [];

    protected $listeners = [
        'userId',
        'resetInputFields',
        'user_id'
    ];

    public function resetInputFields(){
        $this->reset();
    }
    
    public function userId($userId){
        $this->userId = $userId;
        $users = User::find($userId);
        $this->last_name = $users->last_name;
        $this->first_name = $users->first_name;
        $this->middle_name = $users->middle_name;
        $this->gender = $users->gender;
        $this->address = $users->address;
        $this->contact_no = $users->contact_no;
        $this->user_id = $users->user_id;
        $this->username = $users->username;
        $this->email = $users->email;
        // $this->password = $users->password;
        $this->roles = $users->roles->map(fn ($role) => $role->id)->toArray();
    }

    public function user_id($user_id){
        $this->user_id = $user_id;
    }

    // public function updatingUserId(){
    //     $this->user_id = $this->emit('user_id');
    // }

    public function render()
    {
        $userRoles = Role::get();
        // dd($roles);
        return view('livewire.user-form')
            ->with('userRoles',$userRoles);
    }

    public function store(){

        
        $data = $this->validate([
            'last_name' => 'required',
            'first_name' => 'required',
            'middle_name' => 'required',
            'address' => 'required',
            'contact_no' => 'required',
            'username' => 'required',
            'email' => 'required',
            // 'password' => Hash::make($this->password),
            'password' => 'required|string|min:6|',
        ]);
        $data['password'] = Hash::make($this->password);

        if($this->userId){
            $user = User::find($this->userId);
            if (Input::get ('password') == '') {
                $user->update($data)->except ('password');
            }
            // $user->update($data);
            $action = 'edit';
        }else{
            $user = User::create($data);
            $action = 'store';
        }

        $user->syncRoles($this->roles);
        $this->emit('showEmitedFlashMessage', $action);
        $this->resetInputFields();
        $this->emit('refreshParent');
        $this->emit('closeUserModal');

    }

    public function showReferralModal(){
        $this->emit('resetInputFields');
        $this->emit('openReferralModal');
    }

}

and this is the new pop-up referral form

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;

class ReferralForm extends Component
{
    public $referralId;

    public function render()
    {
        return view('livewire.referral-form',[
            'users' => User::paginate(10)->sortBy('id')
        ]);
    }

    public function referralId($referralId){      
        $this->emit('user_id',$referralId);
        $this->emit('closeReferralModal');
    }
}

I was able to successful throw the user id of the selected referral to the edit form but my problem is when I opening the pop-up modal the edit form fields are resetting.