Storybook: remove UseState + add controls support to TimeZonePicker story (#53219)

* remove UseState + add controls support to TimeZonePicker story

* remove redundant check

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx

@@ -1,41 +1,44 @@
 import { action } from '@storybook/addon-actions';
-import { ComponentMeta } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { TimeZonePicker } from '@grafana/ui';
 
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 const meta: ComponentMeta<typeof TimeZonePicker> = {
   title: 'Pickers and Editors/TimePickers/TimeZonePicker',
   component: TimeZonePicker,
   decorators: [withCenteredStory],
+  parameters: {
+    controls: {
+      exclude: ['inputId', 'onChange', 'onBlur'],
+    },
+  },
+  args: {
+    value: 'Europe/Stockholm',
+  },
+  argTypes: {
+    includeInternal: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
 };
 
-export const basic = () => {
+export const Basic: ComponentStory<typeof TimeZonePicker> = (args) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState
-      initialState={{
-        value: 'Europe/Stockholm',
+    <TimeZonePicker
+      {...args}
+      onChange={(newValue) => {
+        action('on selected')(newValue);
+        updateArgs({ value: newValue });
       }}
-    >
-      {(value, updateValue) => {
-        return (
-          <TimeZonePicker
-            includeInternal={true}
-            value={value.value}
-            onChange={(newValue) => {
-              if (!newValue) {
-                return;
-              }
-              action('on selected')(newValue);
-              updateValue({ value: newValue });
-            }}
-          />
-        );
-      }}
-    </UseState>
+      onBlur={action('onBlur')}
+    />
   );
 };