Unable to register component globally in Laravel 9 + Inertia + Vue3

I am very new to Vue3 and Inertia (I have worked with Vue 2). I have been trying to register components globally for ages.

Artisan created the following code:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

This is my Lucide icons file (copied from a Vue3 template):

import { h, defineComponent } from "vue";
import * as lucideIcons from "lucide-vue-next";

const icons = [];
for (const [key, icon] of Object.entries(lucideIcons)) {
  icons[`${key}Icon`] = defineComponent({
    name: `${key}Icon`,
    setup(props, { slots, attrs, emit }) {
      return () =>
        h(icon, {
          class: "lucide",
        });
    },
  });
}

export default icons;

This is "global-components" file (also copied from a Vue3 template)

import LucideIcons from "./lucide";

export default (app) => {
  for (const [key, icon] of Object.entries(LucideIcons)) {
    app.component(key, icon);
  }
};

I am importing globalComponents function and trying to register:

createInertiaApp({
    ...
    setup({ el, app, props, plugin }) {
        const _app = createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);

        globalComponents(app);

        return _app;
    },
});

But the icons are not loading and in the browser console, I am getting "app.component is not a function".

Please let me know what I am doing wrong.