transitions not working

[KaungZinHein84]

I'm using sveltekit 1.27.4 and transitions are not working on both the default notification and custom notification
Here's my CustomToast.svelte component

<script lang="ts">
	import Icon from '@iconify/svelte';
	import { onMount } from 'svelte';
	import { fade } from 'svelte/transition';

	export let notification: { type: string; text: string };
	export let onRemove: () => void;
	let timer: number;
	export let withoutStyles: boolean;

	const handleButtonClick = () => {
		onRemove();
	};

	onMount(() => {
		timer = setTimeout(() => {
			onRemove();
		}, 5000);

		return () => {
			clearTimeout(timer);
		};
	});
</script>

<div
	transition:fade
	class={withoutStyles
		? ''
		: 'bg-white py-2 px-4 rounded-md border border-slate-200 flex items-center justify-between mt-4 min-w-[24rem]'}
>
	<div class="flex items-center space-x-2">
		{#if notification.type === 'error'}
			<Icon icon="mdi:alert-circle" class="text-red-500" />
		{:else if notification.type === 'warning'}
			<Icon icon="mdi:alert-circle" class="text-yellow-500" />
		{:else}
			<Icon icon="mdi:check-circle" class="text-green-500" />
		{/if}
		<p class="text-slate-500 text-sm">{notification.text}</p>
	</div>
	<button on:click={handleButtonClick} class="text-slate-500">
		<Icon icon="mdi:close-thick" /></button
	>
</div>

Here's my +layout.svelte file at the root of routes directory

<script lang="ts">
	import '../app.css';
	import CustomToast from '$lib/components/ui/CustomToast.svelte';
	import Notifications from 'svelte-notifications';
</script>

<Notifications item={CustomToast} zIndex={5000}>
	<slot />
</Notifications>