Dropdown and modal not showing after navigate

I'm having an issue with the dropdown and modal components in Flowbite. Every time I navigate, these two components stop working. I'm using Laravel 11, Inertia v2, and React.

import "@/css/app.css";
import { createInertiaApp, router } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
import Main from "@/js/Layout/Main";
import { initFlowbite } from "@/node_modules/flowbite";

createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
let page = pages[./Pages/${name}.jsx];

    if (!page) {
        throw new Error(`Page not found: ./Pages/${name}.jsx`);
    }
    page.default.layout =
        page.default.layout || ((page) => <Main children={page} />);
    return page;
},
setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
},
title: (title) => (title ? `${title} - CHMS` : "CHMS"),
progress: {
    color: "#ea580c",
    showSpinner: true,
},

}).then((result) => {
initFlowbite();
});

router.on("navigate", (event) => {
initFlowbite();
});

Start with the Inertia app setup containing createInertiaApp, createRoot, initFlowbite, and router.on("navigate"). Reproduce navigation with the dropdown and modal, then trace whether Flowbite initialization runs after the React page changes. Done means both components continue working after navigation.