storybook: [Bug]: Error: [🍍]: "getActivePinia()" was called but there was no active Pinia.

Describe the bug

Given that I have setup Pinia in preview.js as follows:

import { setup } from '@storybook/vue3';
import { createPinia } from 'pinia';

const pinia = createPinia();

// Setup the Vue app
setup((app) => {
  console.log('register pinia');
  app.use(pinia);
});

When I go to a story of a component that is using a Pinia store I keep getting this error that there is no active Pinia in my app instance.

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 13.5.1
    CPU: (12) x64 Apple M2 Pro
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.140
    Edge: 114.0.1823.67
    Safari: 16.6
  npmPackages:
    @storybook/addon-console: ^2.0.0 => 2.0.0 
    @storybook/addon-essentials: ^7.4.0 => 7.4.0 
    @storybook/blocks: ^7.4.0 => 7.4.0 
    @storybook/testing-library: ^0.2.1-next.0 => 0.2.1-next.0 
    @storybook/theming: ^7.4.0 => 7.4.0 
    @storybook/vue3: ^7.4.0 => 7.4.0 
    @storybook/vue3-webpack5: ^7.4.0 => 7.4.0

Additional context

I do it exactly as described in the page Integrate Pinia with Storybook.