[Bug]: non-unique control input ids

Describe the bug

When writing custom component documentation (ie not autodocs) with multiple <Controls /> blocks on a page, changing the value of a control in one instance of <Controls /> can manipulate the control in another instance instead. The issue is that the input elements in each <Controls /> block share the same id and name attributes per arg. For example, for the arg size with 3 options, each instance of <Controls /> will render a radio group using the ids control-size-0, control-size-1, and control-size-2.

Here's a recording from the reproduction link below: https://github.com/user-attachments/assets/4aaa57b2-7213-4652-820b-718188949d24

Reproduction link

https://stackblitz.com/edit/github-ygcv3v?file=src%2Fstories%2Fbutton.mdx

Reproduction steps

1. Go to the above link
2. Click on one of the size options in the controls for section 2
3. Notice that manipulating the controls in section 2 changes the controls in section 1

System

Storybook Environment Info:

System: OS: Linux 5.0 undefined CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Shell: 1.0 - /bin/jsh Binaries: Node: 18.20.3 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.2.3 - /usr/local/bin/npm <----- active pnpm: 8.15.6 - /usr/local/bin/pnpm npmPackages: @storybook/addon-essentials: ^8.4.0-alpha.4 => 8.4.0-alpha.4 @storybook/addon-interactions: ^8.4.0-alpha.4 => 8.4.0-alpha.4 @storybook/addon-onboarding: ^8.4.0-alpha.4 => 8.4.0-alpha.4 @storybook/blocks: ^8.4.0-alpha.4 => 8.4.0-alpha.4 @storybook/react: ^8.4.0-alpha.4 => 8.4.0-alpha.4 @storybook/react-vite: ^8.4.0-alpha.4 => 8.4.0-alpha.4 @storybook/test: ^8.4.0-alpha.4 => 8.4.0-alpha.4 storybook: ^8.4.0-alpha.4 => 8.4.0-alpha.4

Additional context

No response