Vue 3 named not working with default Inertia layout

Hi, I have a simple layout with two slots, one for a header and one for the main content but for some reason I'm unable to inject anything into the header slot. Here is the template:

<template>
    <slot name="header"/>

    <main class="mx-auto max-w-screen-lg">
        <slot />
    </main>

    <footer class="mx-auto max-w-screen-lg"></footer>
</template>

This is how I'm initialising the app inside my app.js:

createInertiaApp({
    resolve: name => {
        let page = require(`./Pages/${name}`).default;

        page.layout ??= Main;

        return page;
    },

    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .component('Link', Link)
            .component('Head', Head)
            .mount(el)
    },

    title: title => `${title} | 99 Car Rental`
});

Any idea why this isn't working?

<template>
	<template #header></template>

	<div></div>
</template>