Preview story in docs doesn't work if story uses knobs

[justman00]

Describe the bug
When I try to use multiple Story components that are using knobs inside my docs file, only the default data of the knob from the first story is displaying

To Reproduce
I have put up a small reproducible example that you can find here: https://github.com/justman00/next-js-storybook-docs-knobs-issue.

Expected behavior
Expected behavior is that even if I have multiple stories with different knobs default value I should see the components accordingly in the docs as they are displayed in canvas:

export const firstStory = () => (
  <Demo content={text('content', 'This always shows')} />
);

export const secondStory = () => (
  <Demo content={text('content', 'this shows only in canvas')} />
);

export const thirdStory = () => (
  <Demo content={text('content', 'this shows also only in canvas')} />
);

From the code above in docs I should be able to see the same component with different content. However it is displayed with the value from the first story.

Here is the code from the docs:

<Preview withSource="none">
  <Story id="demo--first-story" />
</Preview>

<Preview withSource="none">
  <Story id="demo--second-story" />
</Preview>

<Preview withSource="none">
  <Story id="demo--third-story" />
</Preview>

Screenshots

[shilman]

FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs, which are slated for deprecation.

• Controls documentation
• Migration instructions

Please upgrade and try out controls today!