diff --git a/packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx b/packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx
index e7cd9e629c2..ef26cf70384 100644
--- a/packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx
+++ b/packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx
@@ -2,27 +2,19 @@ import React from 'react';
 
 import { withCenteredStory } from './storybook/withCenteredStory';
 import { useDelayedSwitch } from './useDelayedSwitch';
-import { boolean, number } from '@storybook/addon-knobs';
-
-const getKnobs = () => {
-  return {
-    value: boolean('Value', false),
-    duration: number('Duration to stay on', 2000),
-    delay: number('Delay before switching on', 2000),
-  };
-};
-
-function StoryWrapper() {
-  const { value, delay = 0, duration = 0 } = getKnobs();
-  const valueDelayed = useDelayedSwitch(value, { delay, duration });
-  return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
-}
+import { Story } from '@storybook/react';
 
 export default {
   title: 'useDelayedSwitch',
   decorators: [withCenteredStory],
 };
 
-export const basic = () => {
-  return <StoryWrapper />;
+export const Basic: Story = ({ value, delay, duration }) => {
+  const valueDelayed = useDelayedSwitch(value, { delay, duration });
+  return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
+};
+Basic.args = {
+  value: false,
+  duration: 2000,
+  delay: 2000,
 };