Preview in Docs does not display the component correctly

[viettrung2103]

Summary

I am building the Toast component. in the Story, the component is displayed correctly, however, when I view it in Docs, it does not display correctly.

Additional information

this is my preview.ts

import '../styles/tailwind.css';
import type { Preview } from '@storybook/react';
import { withThemeByClassName } from '@storybook/addon-themes';

export const decorators = [
	withThemeByClassName({
		themes: {
			light: 'light',
			dark: 'dark',
			'tourfinder-light': 'tourfinder-light',
			'tourfinder-dark': 'tourfinder-dark',
			'tourmatic-light': 'tourmatic-light',
			'tourmatic-dark': 'tourmatic-dark',
		},
		defaultTheme: 'light',
	}),
];

const preview: Preview = {
	parameters: {
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/i,
			},
		},
	},
};

export default preview;

and my toast.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { command } from 'yargs';

import { Toast, ToastAction, type ToastActionElement,ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport } from '../toast';

const meta = {
	title: 'Base/Toast',
	// because the component is Toast
	// component: Toast,
	component: ToastProvider,
	parameters: {
		layout: 'centered',
	},
	tags: ['autodocs'],
	argTypes: {
		label: {
			control: { type: 'text' },
			description: 'The label of the toast is used for text reader, for accessibility',
		},
		duration: {
			control: { type: 'number' },
			description: 'duration of the toast before auto close',
		},
		swipeDirection: {
			control: { type: 'select' },
			options: ['top', 'left', 'right', 'down'],
		},
	},
	args: {
		label: 'Toast Provider',
		duration: 5000,
		swipeDirection: 'right',
	},
} satisfies Meta<typeof Toast>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  

  args: {
    label: 'Toast Provider',
    // swipeDirection: 'down',

    duration: 1000,
    // swipeThreshold: 50,

		children: (
      // <ToastProvider> 
			<ToastViewport>
				<Toast className='default'>
					<ToastTitle>Toast Title</ToastTitle>
					<ToastDescription>Toast Description</ToastDescription>
					<ToastAction altText='Toast Action'>Toast Action</ToastAction>
					<ToastClose>Toast Close</ToastClose>
				</Toast>
			</ToastViewport>
      // </ToastProvider>
		),
	},
};

this is my component display in Docs and in its stories

I have tried viewport-addon but the addon is only in Story, not in Docs

Create a reproduction

No response