When using a wrapper component then Flowbite pages/components are not working

I created a website page template that sets my sites basic look and feel, but when I pass the main section as a CHILDREN prop then the Flowbite events do not fire. I did lot of experimentation and the culprite is the wrapper. Here is a basic example of how it is setup.

import { Component } from "solid-js";

// Define the layout component
const Layout: Component = (props) => {
  return (
    <div>
      <header>
        {/* Add header content here */}
      </header>
      <main>
        {/* Render the page component here */}
        {props.children}
      </main>
      <footer>
        {/* Add footer content here */}
      </footer>
    </div>
  );
};

// Define a page component
const HomePage: Component = () => {
  return <h1>Welcome to my website!</h1>;
};

// Use the layout component to wrap the page component
const App: Component = () => {
  return (
    <Layout>
      <HomePage />
    </Layout>
  );
};

If you set a simple button and tooltip within the Home Page it will not activate. But if you duplicate the exact same code into the App component directory or just comment out the "Layout" tags then it works just fine.

Is there something I'm just not configuring correctly? I even attempted to import flowbite into every component but it makes no difference. I tried setting this up in Stackblitz but it doesn't compile.

Begin with the minimal Layout, HomePage, and App example in the issue and try reproducing it in StackBlitz, noting that the reporter says StackBlitz does not compile. Compare the wrapped and unwrapped button and tooltip cases; done means identifying whether the wrapper is causal and documenting the required configuration or a confirmed incompatibility.