Livewire wire:navigate and iFrames

Im making an app with laravel using livewire to make an SPA. I've created several full page components and I navigate between them using the wire:navigate directive. I also have a div with an Iframe in the parent layout that is encapsuled in an @persist livewire directive that I dont want to refresh. My problem is that everytime I click in a wire:navigate link to navigate between pages the iframe refreshes. I change the div's background color programmatically on the run and when I navigate between pages the background color persists but the iframe inside this div keeps reloading. Why is this happening? Please help, I can't find any hint on Internet.

The code looks like this:

main.blade.php (Parent layout):

<div id="app" class="col-md-12 d-flex align-items-center justify-content-center flex-column p-0">
    <div class="col-md-8 p-0">
        <livewire:nav-bar :$pageTitle/>    
        <button id="shrink-videocall" onclick="shrinkVideocallWindow()" class="align-items-center justify-content-center" style="display: none;"><i class="fa-solid fa-minimize"></i></button>
        <button id="minimize-videocall" onclick="closeVideocallWindow()" class="align-items-center justify-content-center" style="display: none;"><i class="fa-solid fa-minus"></i></button>
        @persist('videocall')
        <div id="videocall-window" class="videocall-window window-fullscreen p-0 m-0 align-items-center justify-content-center" style="display: none;">
            <div id="videocall-node"><iframe src="https://[..].com" frameborder="0"></iframe></div>
        </div> 
        @endpersist 
        {{ $slot }}
        @persist('chat')
        <livewire:group-chat/>
        @endpersist
    </div>
</div>

nav-bar.blade.php

<div id="navbar-menu" class="col-xl-6 col-lg-9 col-md-10 col-sm-12 justify-content-center align-items-center flex-column" style="display: none;">
    <div id="navbar-options" class="col-md-12 d-flex justify-content-start align-items-center flex-wrap p-0">
        <a wire:navigate href="/" class="navbar-link @if(request()->routeIs('home')) navbar-current-page @endif d-flex flex-row justify-content-between align-items-center">
            <h5 class="m-0">@if(request()->routeIs('home')) <i class="fa-solid fa-caret-right"></i> @endif Inicio</h6>
            <i class="nav-options-icon fa-solid fa-house"></i>
        </a>
        <a wire:navigate href="/patients" class="navbar-link @if(request()->routeIs('patients')) navbar-current-page @endif d-flex flex-row justify-content-between align-items-center">
            <h5 class="m-0">@if(request()->routeIs('patients')) <i class="fa-solid fa-caret-right"></i> @endif Pacientes</h6>
            <i class="nav-options-icon fa-solid fa-user"></i>
        </a>
        <a wire:navigate href="/appointments" class="navbar-link @if(request()->routeIs('appointments')) navbar-current-page @endif d-flex flex-row justify-content-between align-items-center">
            <h5 class="m-0">@if(request()->routeIs('appointments')) <i class="fa-solid fa-caret-right"></i> @endif Citas</h6>
            <i class="nav-options-icon fa-solid fa-calendar-days"></i>
        </a>
        <a onclick="" class="navbar-link d-flex flex-row justify-content-between align-items-center">
            <h5 class="m-0">Ajustes</h6>
            <i class="nav-options-icon fa-solid fa-gear"></i>
        </a>
    </div>
</div>

I've tried data-navigate-once for scripts and persist for the html elements and works for everything but the iframe.