diff --git a/src/components/Drawer/Drawer.scss b/src/components/Drawer/Drawer.scss
index 3e97668f..b264f268 100644
--- a/src/components/Drawer/Drawer.scss
+++ b/src/components/Drawer/Drawer.scss
@@ -77,7 +77,8 @@ $block: '.#{variables.$ns}drawer';
     }
 
     &__item-transition-exit-done,
-    &__item-transition_direction_right-exit-done {
+    &__item-transition_direction_right-exit-done,
+    &__item_hidden {
         visibility: hidden;
     }
 
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index a1af2066..d091da5c 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -80,8 +80,10 @@ export const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(
             keepMounted = false,
         } = props;
 
+        const [isInitialRender, setInitialRender] = React.useState(true);
         const itemRef = React.useRef<HTMLDivElement>(null);
         const handleRef = useForkRef(ref, itemRef);
+
         const cssDirection = direction === 'left' ? undefined : direction;
 
         const {resizedWidth, resizerHandlers} = useResizableDrawerItem({
@@ -92,6 +94,10 @@ export const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(
             onResize,
         });
 
+        React.useEffect(() => {
+            setInitialRender(true);
+        }, [direction]);
+
         const resizerElement = resizable ? (
             <div className={b('resizer', {direction})} {...resizerHandlers}>
                 <div className={b('resizer-handle')} />
@@ -106,10 +112,16 @@ export const DrawerItem = React.forwardRef<HTMLDivElement, DrawerItemProps>(
                 unmountOnExit={!keepMounted}
                 classNames={b('item-transition', {direction: cssDirection})}
                 nodeRef={itemRef}
+                onEnter={() => setInitialRender(false)}
+                onExit={() => setInitialRender(false)}
             >
                 <div
                     ref={handleRef}
-                    className={b('item', {direction: cssDirection}, className)}
+                    className={b(
+                        'item',
+                        {direction: cssDirection, hidden: isInitialRender && !visible},
+                        [className],
+                    )}
                     style={{width: resizable ? `${resizedWidth}px` : undefined}}
                 >
                     {resizerElement}
diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png
index 3679a189..f4fab86a 100644
Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png differ
diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png
index 61c35f2f..5872497d 100644
Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png differ
diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png
index 6eeeec4f..797d9d6e 100644
Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png differ
diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png
index e94f1b19..18015d78 100644
Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png differ
diff --git a/src/components/Drawer/__stories__/DrawerShowcase.tsx b/src/components/Drawer/__stories__/DrawerShowcase.tsx
index 79ab1a20..8720ecb1 100644
--- a/src/components/Drawer/__stories__/DrawerShowcase.tsx
+++ b/src/components/Drawer/__stories__/DrawerShowcase.tsx
@@ -16,8 +16,8 @@ export function DrawerShowcase() {
     const [direction, setDirection] = React.useState<string>('left');
     const [direction2, setDirection2] = React.useState<string>('left');
 
-    const [keepMountedGlobal, setKeepMountedGlobal] = React.useState<boolean>(false);
-    const [keepMounted1, setKeepMounted1] = React.useState<boolean>(false);
+    const [keepMountedGlobal, setKeepMountedGlobal] = React.useState<boolean>(true);
+    const [keepMounted1, setKeepMounted1] = React.useState<boolean>(true);
 
     const hideAll = React.useCallback(() => {
         setVisible1(false);