typescript storybookの型が合わない

const Template: Story = (args: IconButtonProps) => <IconButton {...args} />;のTemplateで下記のエラーが発生します。
iconのエラーだと思うのですがどこがおかしいのかがわかりません。
わかる人いましたらご教授お願いしたいです

typescriptエラー

Type '(args: IconButtonProps) => JSX.Element' is not assignable to type 'Story<Args>'.
  Type '(args: IconButtonProps) => JSX.Element' is not assignable to type 'BaseStory<Args, StoryFnReactReturnType>'.
    Types of parameters 'args' and 'args' are incompatible.
      Type 'Args' is not assignable to type 'IconButtonProps'.
        Property 'icon' is missing in type 'Args' but required in type '{ icon: IconTypes; }'.ts(2322)
IconButton.tsx(9, 3): 'icon' is declared here.

import React, {FC} from 'react';
import { IconButton as ChakraButton, ButtonProps } from '@chakra-ui/react';
import { IconTypes } from '.././Icon/iconOption';
import { TwitterIcon } from '../Icon/TwitterIcon';
import { LinkedInIcon } from '../Icon/LinkedInIcon';
import { FacebookIcon } from '../Icon/FacebookIcon';

export type IconButtonProps =  ButtonProps & {
  icon: IconTypes;
};

type IconObject = {
  components: JSX.Element;
  label: string;
};

ChakraButton.defaultProps = {
  size: 'md',
};

export const IconButton: FC<IconButtonProps> = ({
  icon,
  children,
  ...props
}) => {
  const Icon: Record<IconTypes, IconObject> = {
    twitter: {
      components: <TwitterIcon  />,
      label: 'twitter',
    },
    linkedIn: {
      components: <LinkedInIcon  />,
      label: 'linkedIn',
    },
    facebook: {
      components: <FacebookIcon />,
      label: 'facebook',
    },
  };
  return (
    <ChakraButton
      icon={Icon[icon].components}
      aria-label={Icon[icon].label}
      {...props}
    >
      {children}
    </ChakraButton>
  );
};

// IconButon.stories.tsx
import React from 'react';
import { Story } from '@storybook/react/types-6-0';
import { IconButton, IconButtonProps } from './IconButton';
import { IconOpitions } from '.././Icon/iconOption';

export default {
  title: 'atoms/IconButton',
  component: IconButton,
  argTypes: {
    icon: {
      description: 'ボタンで使用するアイコンです',
      table: {
        type: { summary: 'string', required: true },
      },
      control: {
        type: 'inline-radio',
        options: IconOpitions,
      },
    },
    },
};

const Template: Story = (args: IconButtonProps) => <IconButton {...args} />;

export const Icon = Template.bind({});
Icon.args = {
  icon: 'dots',
};

// IconOption.ts
export const IconOpitions = [
  'twitter',
  'linkedIn',
  'facebook',
];

export type IconTypes = 'twitter' | 'linkedIn' | 'facebook';

行動規範の内容に同意します

回答1件

ベストアンサー

おそらくここだと思います。

ts
1const Template: Story = (args: IconButtonProps) => <IconButton {...args} />;
2// ↑を↓に
3const Template: Story<IconButtonProps> = (args) => <IconButton {...args} />;