Component Not Found When Dispatching from parent to child

navbar component is added in the layout blade.

now i want to bring up login modal which is inside the navbar when i click on a button in another component.

public function goToCheckoutPage(){
        if(Auth::check()){
            return Redirect::route('v2.checkout.index', [
                'package' => $this->package->name_slug,
            ]);
        }
        
        $this->dispatch('login-modal-open')->to(Navbar::class);
    }

this is the code in checkout component. now this reaches navbar component.(checked using adding log).

#[On('login-modal-open')]
    public function openLogin()
    {
        $this->dispatch('login-open')->to(Login::class);
    }

now when i dispatch again from navbar to login it creates error.

 Uncaught (in promise) Component not found: qfQ8A2DB6Ce3qbtNx33z
livewire.js?id=cc800bf4:4609 Uncaught Component not found: qfQ8A2DB6Ce3qbtNx33z

note: login modal works when directly clicked from navbar.

<livewire:v2.auth.login />

tthis is how login component added in navbar