StoryBook(React)でArgTypesが効かなずラジオボタンではなくテキストエリアになる

はじめに

Storybookでコンポーネント管理を始めたのですが、色々つまづくことが多いので共有します
個人的にはデバックがしづらいので解決に時間を使ってしまうことが多いです

問題

以下のコードでtypeをラジオボタンにして切り替えられるようにしたかったのですが、なぜかテキストボックスになってしまいます

Form.stories.tsx

export default {
  title: 'Form',
  component: Form,
  args: {
    label: "from label"
  },
  argTypes: {
    type: {
      option: ["text", "password"],
      control: { type: 'radio' },
      },
    },
  },

解決方法

argsとargTypesの順序を変えたら解決しました

Form.stories.tsx

export default {
  title: 'Form',
  component: Form,
  argTypes: {
    type: {
      option: ["text", "password"],
      control: { type: 'radio' },
      },
    },
  },
  args: {
    label: "from label"
  },

argsの設定が優先されてしまい、typeの型であるstringに適したフォームが表示されていたようでした

おわりに

StoryBook思ったような挙動にするには学習コストがかかりそうな気がしています
地道に解決して導入したいです