[Bug]: Duplicated control id attributes when using multiple <Controls> elements on the same docs page

[oliverschuerch]

Describe the bug

We are using Storybook in a docs-only mode (e.g we start it with the --docs flag).
We usually add multiple stories in a single *.mdx docs file and also at least one <Controls> docs block to give our users the possibility to play around with the main story.

But as soon as we add such a docs block more than once, we get some id and for attribute on the page.
We do not use the <Controls> element with the same story context more than once, but only add multiple blocks with different story contextes (e.g. <Controls of={ComponentStories.StoryA} /> and <Controls of={ComponentStories.StoryB} />).

This happens because the attribute id is only formed from the args key and its value and could be avoided by using the story name or even better by using some on-the-fly generated uuid.

Reproduction:

• Open the url given to reproduce below.
• Inside the second <Controls> (argsTable) element on the page, click (for example) on the label Invalid of the validity control.

Now you should be able to see that the wrong control has been changed (the one in the first <Controls> element) and the one you wanted to change (inside the second <Controls> element) has remained as it was.

If you inspect the controls in both tables, you clearly see, the ones from the first and the second table have the same id attributes.
The same surly applies to the associated label "for" attribute.

To Reproduce

https://preview-2260--swisspost-design-system-next.netlify.app/?path=/docs/886fabcf-148b-4054-a2ec-4869668294fb--docs#on-dark-background

System

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
  Binaries:
    Node: 18.19.0 - ~\AppData\Local\pnpm\node.EXE
    npm: 10.2.3 - ~\AppData\Local\pnpm\npm.CMD
    pnpm: 8.9.0 - ~\AppData\Local\pnpm\pnpm.EXE <----- active
  Browsers:
    Edge: Chromium (121.0.2277.128)

Additional context

No response