How to correctly set up Pinia with Inertia.js SSR in AdonisJS 6? Getting "getActivePinia() was called but there was no active Pinia"

I am building an application using AdonisJS 6, Vue 3, and Inertia.js. I'm trying to integrate Pinia for state management, but I'm running into an error:

I read online and see other issues here, but I use Pinia inside a Vue component (not outside it!)

My Current Setup

1. Installation:

npm i pinia pinia-plugin-persistedstate

2. Inertia Entrypoint (inertia/app.ts)

/// <reference path="../../adonisrc.ts" />
/// <reference path="../../config/inertia.ts" />

import '../css/app.css'
import { createSSRApp, h } from 'vue'
import type { DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS'

createInertiaApp({
  progress: { color: '#5468FF' },

  title: (title) => `${title} - ${appName}`,

  resolve: (name) => {
    return resolvePageComponent(
      `../pages/${name}.vue`,
      import.meta.glob<DefineComponent>('../pages/**/*.vue')
    )
  },

  setup({ el, App, props, plugin }) {
    const pinia = createPinia()
    pinia.use(piniaPluginPersistedstate)
    createSSRApp({ render: () => h(App, props) })
      .use(plugin)
      .use(pinia)
      .mount(el)
  },
})

3. My User Store:

import type { User } from '~/types'
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null as User | null,
    token: null as string | null,
  }),
  getters: {
    isAuthenticated: (state) => !!state.token && (state.user !== null || state.user !== undefined),
  },
  actions: {
    setUser(user: User, token: string) {
      this.user = user
      this.token = token
    },
    clearUser() {
      this.user = null
      this.token = null
    },
  },
  persist: true,
})

4. Example Vue Component (pages/Index.vue)

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
...
import { useUserStore } from '~/store/user_store'

const userStore = useUserStore()

const props = defineProps<{
  ...
}>()
...
</script>

<template>
  <Default>
    <SeoHead name="home" />
    <Hero :slides="slides" />

    <Events
      :locations="locations"
      :categories="categories"
      :events-grouped-by-category="eventsGroupedByCategory"
      :paginated-data="paginatedEvents"
      @load-more="loadMoreEvents"
      v-model:is-loading="isLoading"
      v-model:selected-location="selectedLocation"
      v-model:selected-category="selectedCategory"
    />
  </Default>
</template>

The Problem & My Question

From the official Pinia SSR documentation, I think it should work here!

But somehow it doesn't work! Any thoughts?