diff --git a/src/components/ToastContainer.tsx b/src/components/ToastContainer.tsx
index 241ca138..049a889f 100644
--- a/src/components/ToastContainer.tsx
+++ b/src/components/ToastContainer.tsx
@@ -1,8 +1,9 @@
 import cx from 'clsx';
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import { toast } from '../core';
 import { useToastContainer } from '../hooks/useToastContainer';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect';
 import { ToastContainerProps, ToastPosition } from '../types';
 import { Default, Direction, isFn, parseClassName } from '../utils';
 import { Toast } from './Toast';
@@ -56,7 +57,7 @@ export function ToastContainer(props: ToastContainerProps) {
     }
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (stacked) {
       const nodes = containerRef.current!.querySelectorAll('[data-in="true"]');
       const gap = 12;
diff --git a/src/hooks/useIsomorphicLayoutEffect.ts b/src/hooks/useIsomorphicLayoutEffect.ts
new file mode 100644
index 00000000..ebee7f28
--- /dev/null
+++ b/src/hooks/useIsomorphicLayoutEffect.ts
@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;