storybook7 argTypes select

Question

I am trying visible size, variant to select

but It wasn't working

how to show select?

// Button.tsx

type ButtonSizeUnion = 's' | 'md' | 'l' | 'xl';
type ButtonVariantUnion = 'filled-primary' | 'filled-secondary' | 'outlined' | 'text' | 'unset';

interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'variant'> {
  children: React.ReactNode;

  /**
   * Button Size.
   * @default 'l'
   */
  size?: ButtonSizeUnion;
  /**
   * Button Variant
   * @default 'filled-primary'
   */
  variant?: ButtonVariantUnion;
  bgColor?: ColorThemeProps;
  color?: ColorThemeProps;
}

// Button.stories.tsx
const meta: Meta<typeof ButtonComponent> = {
  title: 'Component/Button',
  component: ButtonComponent,
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: { type: 'select', options: ["s", "md", "l", "xl"] },
      defaultValue: 'l'
    },
    variant: { control: { type: 'select', options: ['filled-primary', 'filled-secondary', 'outlined', 'text', 'unset'] } }
  }
};

export default meta;

result like this:

Additionally, How can I have the type definitions automatically tracked in the select options instead of having to enter them manually?

 argTypes: {
    size: {
      control: { type: 'select', options: ["s", "md", "l", "xl"] },
      defaultValue: 'l'
    },
    variant: { control: { type: 'select', options: ['filled-primary', 'filled-secondary', 'outlined', 'text', 'unset'] } }
  }