Color control gets stuck on initial state

[Danktuary]

Describe the bug
Upgrading from v6.2.0-beta.14 to v6.2.2, I've experienced that the new color control seems to work on initial load, but its input value get stuck when switching to other stories. Changing the color on other stories reflects on the initial story.

If you click the <> color format toggle button, the value will update and show on the current story, but it'll only update once; dragging around the color picker won't update it.

At any point when the Reset Controls button is clicked, it does reset the value and reflects on the component, but doesn't update the color control's input value.

To Reproduce
Steps to reproduce the behavior:

1. Go to a story and change the color with the color control. It works here.
2. Go to a different story and change it again. It doesn't work here.
3. Go back to the first story. The color you used on the other story will be used here.

Expected behavior
When switching stories (or clicking the Reset Controls button), the color control input should reset to a new initial value.

Screenshots
Here's a screen recording: https://gfycat.com/EcstaticGiantGuernseycow

Code snippets
With a React component:

export default function ColorControl({ color }) {
	const colorStyle = color ? { backgroundColor: color } : {}
	return <div style={colorStyle}>Hello World</div>
}

The story:

export default {
    title: 'ColorControl',
    component: ColorControl,
    argTypes: {
        color: {
            control: 'color',
        },
    },
}

const Template = args => <ColorControl {...args} />

export const Default = Template.bind({})

export const Color = Template.bind({})
Color.args = { color: '#0099ff' }

export const ColorEmpty = Template.bind({})
ColorEmpty.args = { color: '' }

System

Environment Info:

  System:
    OS: Linux 4.19 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i3-6006U CPU @ 2.00GHz
  Binaries:
    Node: 15.6.0 - ~/.nvm/versions/node/v15.6.0/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 7.4.0 - ~/.nvm/versions/node/v15.6.0/bin/npm
  npmPackages:
    @storybook/addon-actions: ^6.2.2 => 6.2.2 
    @storybook/addon-essentials: ^6.2.2 => 6.2.2 
    @storybook/addon-links: ^6.2.2 => 6.2.2 

Additional context
Searching through the source code, I think these would be the relevant lines affecting this: https://github.com/storybookjs/storybook/blob/next/lib/components/src/controls/Color.tsx#L211-L213

useState() takes an initial value and continues to use that value even on rerenders. I'm guessing that this causes the input to reference the state of only the first rendered story.

┆Issue is synchronized with this Asana task by Unito

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.5 containing PR #14493 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

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