react_devtools_backend.js:2557 Warning: Encountered two children with the same key, rgba(255, 170, 0, 0.1). Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

[AliciaHellbergNent]

Describe the [bug]
There seems to be an issue with duplicated keys. I am trying to add a presetColors in preview.js, based on an object.

To Reproduce

1. Add a bunch of colors to presetColors n the parameters obj inside preview.js file.
2. Load project
3. Open component with color picker
4. Select on of the presetsColor below picker.

Actual: Error is visible in terminal, new error appear after each select of presetColor...
Expected: No error cluthering the terminal

System
Environment Info:

System:
OS: macOS 11.2.3
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v10.15.3/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
Browsers:
Chrome: 90.0.4430.93
Firefox: 83.0
Safari: 14.0.3
npmPackages:
@storybook/addon-actions: ^6.2.9 => 6.2.9
@storybook/addon-essentials: ^6.2.9 => 6.2.9
@storybook/addon-links: ^6.2.9 => 6.2.9
@storybook/addons: ^6.2.9 => 6.2.9
@storybook/react: ^6.2.9 => 6.2.9
@storybook/theming: ^6.2.9 => 6.2.9

Additional context
There seems to be an issue with duplicated keys. I am trying to add a presetColors in preview.js, based on an object.
Code of pre defined colours
export const COLORS = { TEAL: '#03CCCD', DESAT_PINK: '#FFD4EB', DESAT_RED: '#FAB5BE', DESAT_BLUE: '#C9E5F4', DESAT_GREEN: '#C8EFE1', DESAT_ORANGE: '#FFEACF', DESAT_PURPLE: '#DCD5EE', ..... }

Code from preview.js
import { COLORS } from './../..'; const fetchColors = () => { let ourColors = []; for (const [key, value] of Object.entries(COLORS)) { ourColors.push({color: value, title: key}) } return ourColors } export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/, }, presetColors: fetchColors() }, }

[AliciaHellbergNent]

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.26 containing PR #14925 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.