diff --git a/.betterer.results b/.betterer.results
index 7323a695498..2d71b7e29f5 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1364,10 +1364,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
     "packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
index d582bbcd2fd..203c6332098 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/client-api';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 
 import { SeriesColorPicker, ColorPicker } from '@grafana/ui';
 
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 
@@ -12,7 +12,7 @@ import mdx from './ColorPicker.mdx';
 import { ColorPickerInput, ColorPickerInputProps } from './ColorPickerInput';
 import { ColorPickerProps } from './ColorPickerPopover';
 
-export default {
+const meta: Meta = {
   title: 'Pickers and Editors/ColorPicker',
   component: ColorPicker,
   subcomponents: { SeriesColorPicker, ColorPickerInput },
@@ -22,66 +22,60 @@ export default {
       page: mdx,
     },
     controls: {
-      exclude: ['color', 'onChange', 'onColorChange'],
+      exclude: ['onChange', 'onColorChange'],
     },
   },
   args: {
     enableNamedColors: false,
+    color: '#00ff00',
   },
-} as Meta;
+};
 
-export const Basic: Story<ColorPickerProps> = ({ enableNamedColors }) => {
+export const Basic: Story<ColorPickerProps> = ({ color, enableNamedColors }) => {
+  const [, updateArgs] = useArgs();
+  return renderComponentWithTheme(ColorPicker, {
+    enableNamedColors,
+    color,
+    onChange: (color: string) => {
+      action('Color changed')(color);
+      updateArgs({ color });
+    },
+  });
+};
+
+export const SeriesPicker: Story<ColorPickerProps> = ({ color, enableNamedColors }) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState initialState="#00ff00">
-      {(selectedColor, updateSelectedColor) => {
-        return renderComponentWithTheme(ColorPicker, {
-          enableNamedColors,
-          color: selectedColor,
-          onChange: (color: any) => {
-            action('Color changed')(color);
-            updateSelectedColor(color);
-          },
-        });
+    <SeriesColorPicker
+      enableNamedColors={enableNamedColors}
+      yaxis={1}
+      onToggleAxis={() => {}}
+      color={color}
+      onChange={(color) => {
+        action('Color changed')(color);
+        updateArgs({ color });
       }}
-    </UseState>
+    >
+      {({ ref, showColorPicker, hideColorPicker }) => (
+        <div ref={ref} onMouseLeave={hideColorPicker} onClick={showColorPicker} style={{ color, cursor: 'pointer' }}>
+          Open color picker
+        </div>
+      )}
+    </SeriesColorPicker>
   );
 };
 
-export const SeriesPicker: Story<ColorPickerProps> = ({ enableNamedColors }) => {
+export const Input: Story<ColorPickerInputProps> = ({ color }) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState initialState="#00ff00">
-      {(selectedColor, updateSelectedColor) => {
-        return (
-          <SeriesColorPicker
-            enableNamedColors={enableNamedColors}
-            yaxis={1}
-            onToggleAxis={() => {}}
-            color={selectedColor}
-            onChange={(color) => updateSelectedColor(color)}
-          >
-            {({ ref, showColorPicker, hideColorPicker }) => (
-              <div
-                ref={ref}
-                onMouseLeave={hideColorPicker}
-                onClick={showColorPicker}
-                style={{ color: selectedColor, cursor: 'pointer' }}
-              >
-                Open color picker
-              </div>
-            )}
-          </SeriesColorPicker>
-        );
+    <ColorPickerInput
+      value={color}
+      onChange={(color) => {
+        action('Color changed')(color);
+        updateArgs({ color });
       }}
-    </UseState>
+    />
   );
 };
 
-export const Input: Story<ColorPickerInputProps> = () => {
-  return (
-    <UseState initialState="#ffffff">
-      {(value, onChange) => {
-        return <ColorPickerInput value={value} onChange={onChange} />;
-      }}
-    </UseState>
-  );
-};
+export default meta;