Tailwind CSS ( Flowbite ) navbar components not loading In laravel 10 Livewire 3

Question

I have standard laravel 10 and livewire 3 installation, I am implementing flowbite theme in the SPA app.

1. Upon full page refresh the nav bar components display correctly.
2. But when I click any other page via nav bar ( wire:navigate ) some elements don't load such as dark mode toggle button and drop downs don't work.

Upon searching I found it in the documentation in livewire and implemented it in app.js like below

import './bootstrap';
import 'flowbite';
import './dark-mode';
import { initFlowbite } from 'flowbite';

document.addEventListener('livewire:navigated', () => {
    // console.log('navigated');
    initFlowbite();
})

after above the code, the components are rendering correctly upon form update but not when I click on navigation.

Please look at the following screen shots.

1. First screen shot is when I have full page refresh.
2. Second screen shot is when I clicked settings in the navigation.

Notice the nav bar and toggle dark mode button.

Please help.