diff --git a/.betterer.results b/.betterer.results
index a21ce24ec7c..ab987753e8e 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2124,10 +2124,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "packages/grafana-ui/src/utils/storybook/UseState.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
     "packages/grafana-ui/src/utils/storybook/withTheme.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/Modal/Modal.story.tsx b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
index 87fe350f566..93ec9332285 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.story.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.story.tsx
@@ -6,7 +6,6 @@ import React, { useState } from 'react';
 import { Button, Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
 
 import { getAvailableIcons } from '../../types';
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Modal.mdx';
@@ -88,21 +87,15 @@ export const WithTabs: Story = (args) => {
     />
   );
   return (
-    <UseState initialState={tabs}>
-      {(state, updateState) => {
-        return (
-          <div>
-            <Modal title={modalHeader} isOpen={true}>
-              <TabContent>
-                {activeTab === state[0].value && <div>{args.body}</div>}
-                {activeTab === state[1].value && <div>Second tab content</div>}
-                {activeTab === state[2].value && <div>Third tab content</div>}
-              </TabContent>
-            </Modal>
-          </div>
-        );
-      }}
-    </UseState>
+    <div>
+      <Modal title={modalHeader} isOpen={true}>
+        <TabContent>
+          {activeTab === tabs[0].value && <div>{args.body}</div>}
+          {activeTab === tabs[1].value && <div>Second tab content</div>}
+          {activeTab === tabs[2].value && <div>Third tab content</div>}
+        </TabContent>
+      </Modal>
+    </div>
   );
 };
 WithTabs.args = {
diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx
index c65a2f21b2c..676caa01635 100644
--- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx
+++ b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx
@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/client-api';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import { SecretFormField } from './SecretFormField';
@@ -13,7 +13,7 @@ const meta: ComponentMeta<typeof SecretFormField> = {
   decorators: [withCenteredStory],
   parameters: {
     controls: {
-      exclude: ['onReset'],
+      exclude: ['onChange', 'onReset'],
     },
   },
   argTypes: {
@@ -21,37 +21,32 @@ const meta: ComponentMeta<typeof SecretFormField> = {
     inputWidth: { control: { type: 'range', min: 0, max: 30 } },
     tooltip: { control: { type: 'text' } },
   },
+  args: {
+    isConfigured: false,
+    inputWidth: 12,
+    label: 'Secret field',
+    labelWidth: 10,
+    placeholder: 'Password',
+    tooltip: 'this is a tooltip',
+    value: 'mySuperSecretPassword',
+  },
 };
 
 export const Basic: ComponentStory<typeof SecretFormField> = (args) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState initialState="Input value">
-      {(value, setValue) => (
-        <SecretFormField
-          label={args.label}
-          labelWidth={args.labelWidth}
-          value={value}
-          isConfigured={args.isConfigured}
-          onChange={(e) => setValue(e.currentTarget.value)}
-          onReset={() => {
-            action('Value was reset')('');
-            setValue('');
-          }}
-          inputWidth={args.inputWidth}
-          tooltip={args.tooltip}
-          placeholder={args.placeholder}
-        />
-      )}
-    </UseState>
+    <SecretFormField
+      {...args}
+      onChange={(e) => {
+        action('onChange')(e);
+        updateArgs({ value: e.currentTarget.value });
+      }}
+      onReset={() => {
+        action('onReset')('');
+        updateArgs({ value: '' });
+      }}
+    />
   );
 };
-Basic.args = {
-  label: 'Secret field',
-  labelWidth: 10,
-  isConfigured: false,
-  inputWidth: 12,
-  tooltip: 'this is a tooltip',
-  placeholder: 'Password',
-};
 
 export default meta;
diff --git a/packages/grafana-ui/src/utils/storybook/UseState.tsx b/packages/grafana-ui/src/utils/storybook/UseState.tsx
deleted file mode 100644
index 0fcfa1b2704..00000000000
--- a/packages/grafana-ui/src/utils/storybook/UseState.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import React, { Component } from 'react';
-
-interface StateHolderProps<T> {
-  logState?: boolean;
-  initialState: T;
-  children: (currentState: T, updateState: (nextState: T) => void) => React.ReactNode;
-}
-
-export class UseState<T> extends Component<StateHolderProps<T>, { value: T; initialState: T }> {
-  constructor(props: StateHolderProps<T>) {
-    super(props);
-    this.state = {
-      value: props.initialState,
-      initialState: props.initialState, // To enable control from knobs
-    };
-  }
-  // @ts-ignore
-  static getDerivedStateFromProps(props: StateHolderProps<{}>, state: { value: any; initialState: any }) {
-    if (props.initialState !== state.initialState) {
-      return {
-        initialState: props.initialState,
-        value: props.initialState,
-      };
-    }
-    return {
-      ...state,
-      value: state.value,
-    };
-  }
-
-  handleStateUpdate = (nextState: T) => {
-    this.setState({ value: nextState });
-  };
-
-  render() {
-    if (this.props.logState) {
-      action('UseState current state')(this.state.value);
-    }
-    return this.props.children(this.state.value, this.handleStateUpdate);
-  }
-}