Can't have working tabs

[AlexTeixeira]

Versions

Storybook : 6.5.14
storybook-addon-docs-tabs : ^1.0.3

Issue

I was able to see the tabs, but the content is not display. Furthermore, the hidden trick to hide the stories does not work.

Error

When I navigate between the tabs I got an undefined value, see the error below

Error: Couldn't find story matching 'undefined--heading'.
- Are you sure a story with that id exists?
- Please check your stories field of your main.js config.
- Also check the browser console and terminal for error messages.
    _callee2$ PreviewWeb.js:201
    tryCatch runtime.js:64
    invoke runtime.js:299
    runtime vendors~main.iframe.bundle.js:113263
    asyncGeneratorStep PreviewWeb.js:15
    _next PreviewWeb.js:17
    pnpm vendors~main.iframe.bundle.js:16253
    pnpm vendors~main.iframe.bundle.js:16253
    selectSpecifiedStory PreviewWeb.js:227
    pnpm vendors~main.iframe.bundle.js:16403
    promise vendors~main.iframe.bundle.js:119797
    _runResolutions index.js:214
    then index.js:67
    initializeWithStoryIndex PreviewWeb.js:160
    pnpm vendors~main.iframe.bundle.js:15595
    promise vendors~main.iframe.bundle.js:119797
    _runResolutions index.js:214
    then index.js:67
    initializeWithProjectAnnotations Preview.js:160
    initializeWithProjectAnnotations PreviewWeb.js:118
    pnpm vendors~main.iframe.bundle.js:15537
    promise vendors~main.iframe.bundle.js:119797
    _runResolutions index.js:214
    then index.js:67
    initialize Preview.js:102
    configure start.js:155
    configure index.js:21
    js generated-stories-entry.js:6
    js main.iframe.bundle.js:264
    Webpack 7
[index.js:56](webpack:////home/alexandreteixeira/WebstormProjects/askmethat-footprediction/node_modules/.pnpm/@storybook+client-logger@6.5.14/node_modules/@storybook/client-logger/dist/esm/index.js)

Code & Configuration

I have followed the Github Getting started, but from my point of view the part : ** Usage in story ** is not enough.
We can't compare a working example with our implementation.

I have this code that contains de tabs :

import * as DesignTab from "./heading-design.stories.mdx";
import * as ApiTab from "./heading-api.stories.mdx";

import { Meta } from "@storybook/addon-docs";

<Meta
  title="Typography/Heading"
  parameters={{
    tabs: [
      { label: "Design", mdx: DesignTab },
      { label: "API", mdx: ApiTab },
    ],
  }}
/>

The both tabs for know are the same, I copy past one here :

import { Preview, Meta, Story } from "@storybook/addon-docs";
import { Heading } from "ui";

<Meta id={"heading-api"} title="hidden/heading-api" component={Heading} />

export const Template = (args) => <Heading {...args} />;

# Test

<Preview>
  <Story name="Heading" args={{ text: "Heading" }} />
</Preview>

a good example would be appreciated

Thanks in advance