Vue.js + TypeScriptのinjectがexistエラーになるのを解決したい

Question

Vue CLIでVue.js + TypeScriptの構成でProvide / inject機能を使ってstore機能を実装しています。

構成

/src
├ /store
│  ├ product.ts
│  ├ user.ts
│  └ index.ts
├ App.vue
└ main.ts

store/user.ts

import { reactive } from "vue";

interface userStateType {
  user: {
    id: number;
    name: string;
    age: number;
  };
}

export const userState = () => {
  const state = reactive({
    user: {
      id: 1,
      name: "Taro",
      age: 18,
    },
  }) as userStateType;

  return {
    state,
  };
};

store/product.ts

import { reactive } from "vue";

interface productStateType {
  product: {
    id: number;
    name: string;
    price: number;
  };
}

export const productState = () => {
  const state = reactive({
    product: {
      id: 1,
      name: "car",
      price: 1000,
    },
  }) as productStateType;

  return {
    state,
  };
};

store/index.ts

上記の user と product の各stateをまとめます。

import { inject, InjectionKey } from "vue";
import { userState } from "./user";
import { productState } from "./product";

export const getStore = () => {
  return {
    user: userState(),
    product: productState(),
  };
};

export type storeType = ReturnType<typeof getStore>;

type storesKey = keyof storeType;

export const storeKey: InjectionKey<storeType> = Symbol("store");

// keyを引数で受け取って各stateを取得したい
export function useStore(storeName: storesKey) {
  const store = inject(storeKey);
  if (!store) {
    throw new Error(`Error`);
  }
  return store[storeName];
}

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { getStore, storeKey } from "@/store/index";

createApp(App).provide(storeKey, getStore()).mount("#app");

App.vue

<template>
  <p>{{ userState.user.age }}</p>
  <p>{{ productState.product.price }}</p>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "@/store/index";

export default defineComponent({
  name: "App",
  setup() {
    const { state: userState } = useStore("user");
    const { state: productState } = useStore("product");

    // エラー
    // TS2339: Property 'id' does not exist on type 'state | state'.
    // Property 'id' does not exist on type 'state'.
    console.log(userState.user.age);
    console.log(productState.product.price);

    return {
      userState,
      productState,
    };
  },
});
</script>

発生している問題

各stateのプロパティにアクセスしようとした際に

TS2339: Property 'id' does not exist on type 'state | state'.
Property 'id' does not exist on type 'state'.

上記エラーが発生します。

TypeScriptの定義（InjectionKey？？）の仕方が間違っているのだとは思うのですがどなたか解決方法をご教示お願いします。