How do I pass a component as args in a story?

[DotJM]

Summary

I can pass a svelte component as an argument to my component. When I try to use it in storybook, it doesn't work. What should I do?

I clearly passed the component, but it's passed {wrapper} instead of component.
It runs like the code below.

<Button 
  onclick={onclick}
  children={() => {}}
  color="primary"
  size="lg"
  StartIcon={wrapper}
 />

Additional information

<script module>
	import { defineMeta } from '@storybook/addon-svelte-csf';
	import Button from './Button.svelte';
	import { fn } from '@storybook/test';
	import { createRawSnippet } from 'svelte';
	import Home from '$lib/components/icons/Home.svelte';
	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';

	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
	const { Story } = defineMeta({
		title: 'components/Button',
		component: Button,
		tags: ['autodocs'],
		argTypes: {
			size: {
				control: { type: 'select' },
				options: ['md', 'lg']
			},
			variant: {
				control: { type: 'select' },
				options: ['solid', 'outline', 'bordered']
			},
			color: {
				control: { type: 'select' },
				options: ['primary', 'secondary']
			},
			class: {
				control: { type: 'text' }
			}
			// children: {
			//   control: { type: 'text' },
			// },
		},
		args: {
			onclick: fn(),
			children: createRawSnippet(() => ({ render: () => 'Click me' })),
		}
	});
</script>

<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
<Story
	name="Large"
	args={{ size: 'lg', children: createRawSnippet(() => ({ render: () => 'Large Button' })) }} />

<Story
	name="Medium"
	args={{ size: 'md', children: createRawSnippet(() => ({ render: () => 'Medium Button' })) }} />

<Story
	name="Primary"
	args={{
		color: 'primary',
		size: 'lg',
		children: createRawSnippet(() => ({ render: () => 'Primary Button' }))
	}} />

<Story
	name="Secondary"
	args={{
		color: 'secondary',
		size: 'lg',
		children: createRawSnippet(() => ({ render: () => 'Secondary Button' }))
	}} />

<Story
	name="Primary Outline"
	args={{
		color: 'primary',
		size: 'lg',
		variant: 'outline',
		children: createRawSnippet(() => ({ render: () => 'Primary Outline Button' }))
	}} />

<Story
	name="Secondary Outline"
	args={{
		color: 'secondary',
		size: 'lg',
		variant: 'outline',
		children: createRawSnippet(() => ({ render: () => 'Secondary Outline Button' }))
	}} />

<Story
	name="StartIcon"
	args={{
		color: 'primary',
		size: 'lg',
		children: createRawSnippet(() => ({ render: () => 'Button' })),
		StartIcon: Home 
	}} /> <!-- not work -->

<Story
	name="EndIcon"
	args={{
		color: 'primary',
		size: 'lg',
		children: createRawSnippet(() => ({ render: () => 'Button' })),
		EndIcon: ChevronDown
	}}>
</Story> <!-- not work -->

and my component props

let {
		children,
		size = 'md',
		variant = 'solid',
		color = 'primary',
		StartIcon = null,
		EndIcon = null,
		class: customClass = '',
		onclick: onClick,
		...rest
	}: {
		children?: Snippet;
		size?: string;
		variant?: string;
		color?: string;
		StartIcon?: Component | null;
		EndIcon?: Component | null;
		class?: String;
		onclick?: (event: MouseEvent) => void;
	} = $props();
	```

### Create a reproduction

_No response_

[DotJM]

Sorry, it's my fault.