diff --git a/packages/eui/src/components/flyout/flyout.component.tsx b/packages/eui/src/components/flyout/flyout.component.tsx
index a09918fdc97..80ee8b28ffb 100644
--- a/packages/eui/src/components/flyout/flyout.component.tsx
+++ b/packages/eui/src/components/flyout/flyout.component.tsx
@@ -471,6 +471,23 @@ export const EuiFlyoutComponent = forwardRef(
       styles[side],
     ];
 
+    const resizableButtonStyles = [
+      styles.resizable.button,
+      isPushed && side === 'left' && styles.resizable.buttonPushLeft,
+      isPushed && side === 'right' && styles.resizable.buttonPushRight,
+      !isPushed && side === 'left' && styles.resizable.buttonOverlayLeft,
+      !isPushed && side === 'right' && styles.resizable.buttonOverlayRight,
+      !isPushed && ownFocus && styles.resizable.buttonNoOverlay,
+      !isPushed &&
+        ownFocus &&
+        side === 'left' &&
+        styles.resizable.buttonNoOverlayLeft,
+      !isPushed &&
+        ownFocus &&
+        side === 'right' &&
+        styles.resizable.buttonNoOverlayRight,
+    ];
+
     const classes = classnames(
       'euiFlyout',
       openStateToClassNameMap[openState],
@@ -646,6 +663,9 @@ export const EuiFlyoutComponent = forwardRef(
             {flyoutMenuProps && <EuiFlyoutMenu {...flyoutMenuProps} />}
             {resizable && (
               <EuiFlyoutResizeButton
+                isHorizontal
+                indicator="border"
+                css={resizableButtonStyles}
                 type={type}
                 side={side}
                 ownFocus={ownFocus}
diff --git a/packages/eui/src/components/flyout/manager/activity_stage.ts b/packages/eui/src/components/flyout/manager/activity_stage.ts
index 080ef6b4141..da8a9dd92da 100644
--- a/packages/eui/src/components/flyout/manager/activity_stage.ts
+++ b/packages/eui/src/components/flyout/manager/activity_stage.ts
@@ -96,24 +96,44 @@ export const useFlyoutActivityStage = ({
   }, [isActive, hasChild, layoutMode, level, ctx, flyoutId, stage]);
 
   /**
-   * OPENING / RETURNING -> ACTIVE
-   * CLOSING -> INACTIVE
-   * BACKGROUNDING -> BACKGROUNDED
+   * Get the stage to transition to for given current stage.
+   * Returns `null` if stage should remain unchanged.
+   *
+   * Stage transitions:
+   *  - OPENING / RETURNING -> ACTIVE
+   *  - CLOSING -> INACTIVE
+   *  - BACKGROUNDING -> BACKGROUNDED
+   */
+  const getNextStage = (
+    stage: EuiFlyoutActivityStage
+  ): EuiFlyoutActivityStage | null => {
+    switch (stage) {
+      case STAGE_OPENING:
+      case STAGE_RETURNING:
+        return STAGE_ACTIVE;
+
+      case STAGE_CLOSING:
+        return STAGE_INACTIVE;
+
+      case STAGE_BACKGROUNDING:
+        return STAGE_BACKGROUNDED;
+    }
+
+    return null;
+  };
+
+  /**
+   * onAnimationEnd event handler that must be passed to EuiFlyout.
+   * It handles transitions between stages and updates activity stage
+   * in EuiFlyoutManagerContext.
    */
   const onAnimationEnd = useCallback(() => {
-    const s = stageRef.current;
-    const next: EuiFlyoutActivityStage | null =
-      s === STAGE_OPENING || s === STAGE_RETURNING
-        ? STAGE_ACTIVE
-        : s === STAGE_CLOSING
-        ? STAGE_INACTIVE
-        : s === STAGE_BACKGROUNDING
-        ? STAGE_BACKGROUNDED
-        : null;
+    const currentStage = stageRef.current;
+    const nextStage = getNextStage(currentStage);
 
-    if (next && next !== s) {
-      ctx?.dispatch?.(setActivityStage(flyoutId, next));
-      stageRef.current = next;
+    if (nextStage && nextStage !== currentStage) {
+      ctx?.dispatch?.(setActivityStage(flyoutId, nextStage));
+      stageRef.current = nextStage;
     }
   }, [ctx, flyoutId]);
 
diff --git a/packages/eui/src/components/flyout/manager/flyout_child.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_child.stories.tsx
index 6bceb3d028b..8c15468e10b 100644
--- a/packages/eui/src/components/flyout/manager/flyout_child.stories.tsx
+++ b/packages/eui/src/components/flyout/manager/flyout_child.stories.tsx
@@ -225,86 +225,84 @@ const StatefulFlyout: React.FC<FlyoutChildStoryArgs> = ({
         <EuiButton onClick={openMain}>Open Main Flyout</EuiButton>
       )}
 
-      {isMainOpen && (
-        <EuiFlyout
-          session={true}
-          id="flyout-manager-playground-main"
-          size={mainSize}
-          type={mainFlyoutType}
-          pushMinBreakpoint={pushMinBreakpoint}
-          maxWidth={mainMaxWidth}
-          ownFocus={false}
-          resizable={mainFlyoutResizable}
-          {...args}
-          aria-label={`Main Flyout Menu (${mainSize})`}
-          onClose={closeMain}
-        >
-          <EuiFlyoutBody>
-            <EuiText>
-              <p>This is the main flyout content.</p>
-              <p>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
-                neque sequi illo, cum rerum quia ab animi velit sit incidunt
-                inventore temporibus eaque nam veritatis amet maxime maiores
-                optio quam?
-              </p>
-            </EuiText>
-            <EuiSpacer />
+      <EuiFlyout
+        isOpen={isMainOpen}
+        session={true}
+        id="flyout-manager-playground-main"
+        size={mainSize}
+        type={mainFlyoutType}
+        pushMinBreakpoint={pushMinBreakpoint}
+        maxWidth={mainMaxWidth}
+        ownFocus={false}
+        resizable={mainFlyoutResizable}
+        {...args}
+        onClose={closeMain}
+      >
+        <EuiFlyoutMenu title={`Main Flyout Menu (${mainSize})`} />
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>This is the main flyout content.</p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
+              neque sequi illo, cum rerum quia ab animi velit sit incidunt
+              inventore temporibus eaque nam veritatis amet maxime maiores optio
+              quam?
+            </p>
+          </EuiText>
+          <EuiSpacer />
 
-            {!isChildOpen ? (
-              <EuiButton onClick={openChild}>Open child panel</EuiButton>
-            ) : (
-              <EuiButton onClick={closeChild}>Close child panel</EuiButton>
-            )}
-            {isChildOpen && (
-              <EuiFlyout
-                id="flyout-manager-playground-child"
-                size={childSize}
-                backgroundStyle={childBackgroundStyle}
-                maxWidth={childMaxWidth}
-                ownFocus={false}
-                resizable={childFlyoutResizable}
-                {...args}
-                aria-label={`Child Flyout Panel (${childSize})`}
-                onClose={closeChild}
-              >
-                <EuiFlyoutBody>
-                  <EuiText>
-                    <p>This is the child flyout content.</p>
-                    <p>Size restrictions apply:</p>
-                    <ul>
-                      <li>When main panel is 's', child can be 's', or 'm'</li>
-                      <li>When main panel is 'm', child is limited to 's'</li>
-                    </ul>
-                    <EuiSpacer />
-                    <p>
-                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                      Dolorum neque sequi illo, cum rerum quia ab animi velit
-                      sit incidunt inventore temporibus eaque nam veritatis amet
-                      maxime maiores optio quam?
-                    </p>
-                  </EuiText>
-                </EuiFlyoutBody>
-                {showFooter && (
-                  <EuiFlyoutFooter>
-                    <EuiText>
-                      <p>Child flyout footer</p>
-                    </EuiText>
-                  </EuiFlyoutFooter>
-                )}
-                {/* Footer is optional */}
-              </EuiFlyout>
-            )}
-          </EuiFlyoutBody>
-          {showFooter && (
-            <EuiFlyoutFooter>
+          {!isChildOpen ? (
+            <EuiButton onClick={openChild}>Open child panel</EuiButton>
+          ) : (
+            <EuiButton onClick={closeChild}>Close child panel</EuiButton>
+          )}
+          <EuiFlyout
+            isOpen={isChildOpen}
+            id="flyout-manager-playground-child"
+            size={childSize}
+            backgroundStyle={childBackgroundStyle}
+            maxWidth={childMaxWidth}
+            ownFocus={false}
+            resizable={childFlyoutResizable}
+            {...args}
+            onClose={closeChild}
+          >
+            <EuiFlyoutMenu title={`Child Flyout Menu (${childSize})`} />
+            <EuiFlyoutBody>
               <EuiText>
-                <p>Main flyout footer</p>
+                <p>This is the child flyout content.</p>
+                <p>Size restrictions apply:</p>
+                <ul>
+                  <li>When main panel is 's', child can be 's', or 'm'</li>
+                  <li>When main panel is 'm', child is limited to 's'</li>
+                </ul>
+                <EuiSpacer />
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Dolorum neque sequi illo, cum rerum quia ab animi velit sit
+                  incidunt inventore temporibus eaque nam veritatis amet maxime
+                  maiores optio quam?
+                </p>
               </EuiText>
-            </EuiFlyoutFooter>
-          )}
-        </EuiFlyout>
-      )}
+            </EuiFlyoutBody>
+            {showFooter && (
+              <EuiFlyoutFooter>
+                <EuiText>
+                  <p>Child flyout footer</p>
+                </EuiText>
+              </EuiFlyoutFooter>
+            )}
+            {/* Footer is optional */}
+          </EuiFlyout>
+        </EuiFlyoutBody>
+        {showFooter && (
+          <EuiFlyoutFooter>
+            <EuiText>
+              <p>Main flyout footer</p>
+            </EuiText>
+          </EuiFlyoutFooter>
+        )}
+      </EuiFlyout>
     </>
   );
 };
diff --git a/packages/eui/src/components/flyout/manager/flyout_fill_mode.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_fill_mode.stories.tsx
index 81bd5a1ab62..11198710005 100644
--- a/packages/eui/src/components/flyout/manager/flyout_fill_mode.stories.tsx
+++ b/packages/eui/src/components/flyout/manager/flyout_fill_mode.stories.tsx
@@ -185,20 +185,50 @@ const Session: React.FC<FlyoutChildStoryArgs> = (args) => {
         <EuiButton onClick={openMain}>Open Main Flyout</EuiButton>
       )}
 
-      {isMainOpen && (
+      <EuiFlyout
+        isOpen={isMainOpen}
+        session={true}
+        size={mainSize}
+        type={mainFlyoutType}
+        maxWidth={mainMaxWidth}
+        ownFocus={false}
+        {...rest}
+        onClose={closeMain}
+      >
+        <EuiFlyoutMenu title={`Main Flyout Menu (${mainSize})`} />
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>This is the main flyout content.</p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
+              neque sequi illo, cum rerum quia ab animi velit sit incidunt
+              inventore temporibus eaque nam veritatis amet maxime maiores optio
+              quam?
+            </p>
+          </EuiText>
+          <EuiSpacer />
+
+          {!isChildOpen ? (
+            <EuiButton onClick={openChild}>Open child panel</EuiButton>
+          ) : (
+            <EuiButton onClick={closeChild}>Close child panel</EuiButton>
+          )}
+        </EuiFlyoutBody>
         <EuiFlyout
-          session={true}
-          size={mainSize}
-          type={mainFlyoutType}
-          maxWidth={mainMaxWidth}
+          isOpen={isChildOpen}
+          size={childSize}
+          backgroundStyle={childBackgroundStyle}
+          maxWidth={childMaxWidth}
           ownFocus={false}
           aria-label={`Main Flyout Menu (${mainSize})`}
           {...rest}
-          onClose={closeMain}
+          onClose={closeChild}
         >
+          <EuiFlyoutMenu title={`Child Flyout Menu (${childSize})`} />
           <EuiFlyoutBody>
             <EuiText>
-              <p>This is the main flyout content.</p>
+              <p>This is the child flyout content.</p>
+              <EuiSpacer />
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
                 neque sequi illo, cum rerum quia ab animi velit sit incidunt
@@ -206,40 +236,9 @@ const Session: React.FC<FlyoutChildStoryArgs> = (args) => {
                 optio quam?
               </p>
             </EuiText>
-            <EuiSpacer />
-
-            {!isChildOpen ? (
-              <EuiButton onClick={openChild}>Open child panel</EuiButton>
-            ) : (
-              <EuiButton onClick={closeChild}>Close child panel</EuiButton>
-            )}
           </EuiFlyoutBody>
-          {isChildOpen && (
-            <EuiFlyout
-              size={childSize}
-              backgroundStyle={childBackgroundStyle}
-              maxWidth={childMaxWidth}
-              ownFocus={false}
-              aria-label={`Child Flyout Menu (${childSize})`}
-              {...rest}
-              onClose={closeChild}
-            >
-              <EuiFlyoutBody>
-                <EuiText>
-                  <p>This is the child flyout content.</p>
-                  <EuiSpacer />
-                  <p>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    Dolorum neque sequi illo, cum rerum quia ab animi velit sit
-                    incidunt inventore temporibus eaque nam veritatis amet
-                    maxime maiores optio quam?
-                  </p>
-                </EuiText>
-              </EuiFlyoutBody>
-            </EuiFlyout>
-          )}
         </EuiFlyout>
-      )}
+      </EuiFlyout>
     </>
   );
 };
diff --git a/packages/eui/src/components/flyout/manager/flyout_managed.styles.ts b/packages/eui/src/components/flyout/manager/flyout_managed.styles.ts
index ecacc6de0af..47097c1d244 100644
--- a/packages/eui/src/components/flyout/manager/flyout_managed.styles.ts
+++ b/packages/eui/src/components/flyout/manager/flyout_managed.styles.ts
@@ -10,17 +10,15 @@ import { css, keyframes } from '@emotion/react';
 import { euiCanAnimate, logicalCSS } from '../../../global_styling';
 import { UseEuiTheme } from '../../../services';
 import {
+  LEVEL_MAIN,
   STAGE_ACTIVE,
   STAGE_BACKGROUNDED,
   STAGE_BACKGROUNDING,
-  STAGE_CLOSING,
-  STAGE_INACTIVE,
   STAGE_OPENING,
   STAGE_RETURNING,
 } from './const';
-import { euiFlyoutSlideInLeft, euiFlyoutSlideInRight } from '../flyout.styles';
 import { _EuiFlyoutSide, DEFAULT_SIDE } from '../const';
-import { EuiFlyoutActivityStage } from './types';
+import type { EuiFlyoutActivityStage, EuiFlyoutLevel } from './types';
 
 /**
  * Emotion styles for managed flyouts.
@@ -33,7 +31,8 @@ export const euiManagedFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
   return {
     stage: (
       activeStage: EuiFlyoutActivityStage,
-      side: _EuiFlyoutSide = DEFAULT_SIDE
+      side: _EuiFlyoutSide = DEFAULT_SIDE,
+      level: EuiFlyoutLevel
     ) => {
       // Animation for moving flyout backwards in 3D space (z-axis) when inactive
       const euiFlyoutSlideBack3D = keyframes`
@@ -83,16 +82,6 @@ export const euiManagedFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
         }
       `;
 
-      const openingTransition = css`
-        ${euiCanAnimate} {
-          animation: ${side === 'left'
-              ? euiFlyoutSlideInLeft
-              : euiFlyoutSlideInRight}
-            ${euiTheme.animation.normal} ${euiTheme.animation.resistance}
-            forwards;
-        }
-      `;
-
       const noTransition = css`
         ${euiCanAnimate} {
           animation: none;
@@ -116,21 +105,23 @@ export const euiManagedFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
 
       switch (activeStage) {
         case STAGE_OPENING:
-          return [activeFlyout, openingTransition];
+          // Apply a higher z-index to opening main flyouts for seamless
+          // transitions from previously active main flyouts
+          return [level === LEVEL_MAIN && activeFlyout];
 
         case STAGE_ACTIVE:
           return [activeFlyout, noTransition];
 
-        case STAGE_CLOSING:
         case STAGE_BACKGROUNDING:
           return [inactiveTransition];
 
-        case STAGE_INACTIVE:
         case STAGE_BACKGROUNDED:
           return [inactiveFlyout, noTransition];
 
         case STAGE_RETURNING:
           return [activeFlyout, returningTransition];
+
+        // TODO(tkajtoch): What to do with STAGE_CLOSING?
       }
     },
     managedFlyout: css`
diff --git a/packages/eui/src/components/flyout/manager/flyout_managed.test.tsx b/packages/eui/src/components/flyout/manager/flyout_managed.test.tsx
index b65ebf5bbe1..e66f78e06a0 100644
--- a/packages/eui/src/components/flyout/manager/flyout_managed.test.tsx
+++ b/packages/eui/src/components/flyout/manager/flyout_managed.test.tsx
@@ -28,7 +28,7 @@ jest.mock('../flyout.component', () => {
   const React = require('react');
   return {
     EuiFlyoutComponent: React.forwardRef(function MockFlyout(
-      props: any,
+      { isOpen, ...props }: any,
       ref: any
     ) {
       // Extract flyoutMenuProps to prevent it from being passed to DOM
@@ -37,6 +37,7 @@ jest.mock('../flyout.component', () => {
         ref,
         ...domProps,
         'data-test-subj': 'managed-flyout',
+        'data-is-open': isOpen,
         onClick: () => props.onClose && props.onClose({} as any),
       });
     }),
diff --git a/packages/eui/src/components/flyout/manager/flyout_managed.tsx b/packages/eui/src/components/flyout/manager/flyout_managed.tsx
index a21b7a5b4dc..0acf23e3abc 100644
--- a/packages/eui/src/components/flyout/manager/flyout_managed.tsx
+++ b/packages/eui/src/components/flyout/manager/flyout_managed.tsx
@@ -70,6 +70,7 @@ export const EuiManagedFlyout = ({
   level,
   size,
   css: customCss,
+  isOpen = true,
   flyoutMenuProps: _flyoutMenuProps,
   ...props
 }: EuiManagedFlyoutProps) => {
@@ -116,12 +117,12 @@ export const EuiManagedFlyout = ({
 
   // Register/unregister with flyout manager context
   useEffect(() => {
-    addFlyout(flyoutId, title!, level, size as string);
+    if (isOpen) {
+      addFlyout(flyoutId, level, size as string);
 
-    return () => {
-      closeFlyout(flyoutId);
-    };
-  }, [size, flyoutId, title, level, addFlyout, closeFlyout]);
+      return () => closeFlyout(flyoutId);
+    }
+  }, [isOpen, size, level, flyoutId, addFlyout, closeFlyout]);
 
   // Track width changes for flyouts
   const { width } = useResizeObserver(
@@ -160,7 +161,7 @@ export const EuiManagedFlyout = ({
           css={[
             styles.managedFlyout,
             customCss,
-            styles.stage(activityStage, props.side),
+            styles.stage(activityStage, props.side, level),
           ]}
           {...{
             ...props,
@@ -168,6 +169,7 @@ export const EuiManagedFlyout = ({
             size,
             flyoutMenuProps,
             onAnimationEnd,
+            isOpen,
             [PROPERTY_FLYOUT]: true,
             [PROPERTY_LAYOUT_MODE]: layoutMode,
             [PROPERTY_LEVEL]: level,
diff --git a/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx b/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx
index a8cfe9a9b17..82fa1431dea 100644
--- a/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx
+++ b/packages/eui/src/components/flyout/manager/flyout_manager.stories.tsx
@@ -43,7 +43,7 @@ interface ECommerceContentProps {
 
 interface ShoppingCartProps
   extends ECommerceContentProps,
-    Pick<EuiFlyoutProps, 'onClose' | 'ownFocus' | 'side'> {
+    Pick<EuiFlyoutProps, 'onClose' | 'ownFocus' | 'side' | 'isOpen'> {
   onQuantityChange: (delta: number) => void;
 }
 
@@ -53,6 +53,7 @@ const ShoppingCartFlyout = ({
   onClose,
   ownFocus,
   side,
+  isOpen,
 }: ShoppingCartProps) => {
   const [isItemDetailsOpen, setIsItemDetailsOpen] = useState(false);
   const [isReviewCartOpen, setIsReviewCartOpen] = useState(false);
@@ -65,7 +66,7 @@ const ShoppingCartFlyout = ({
       ownFocus={ownFocus}
       side={side}
       aria-label="Shopping cart"
-      {...{ onClose }}
+      {...{ onClose, isOpen }}
     >
       <EuiFlyoutBody>
         <EuiText>
@@ -99,22 +100,18 @@ const ShoppingCartFlyout = ({
         >
           {isReviewCartOpen ? 'Close review' : 'Proceed to review'}
         </EuiButton>
-        {isItemDetailsOpen && (
-          <ItemDetailsFlyout
-            onClose={() => setIsItemDetailsOpen(false)}
-            itemQuantity={itemQuantity}
-            side={side}
-          />
-        )}
-        {isReviewCartOpen && (
-          <>
-            <ReviewOrderFlyout
-              onClose={() => setIsReviewCartOpen(false)}
-              itemQuantity={itemQuantity}
-              side={side}
-            />
-          </>
-        )}
+        <ItemDetailsFlyout
+          isOpen={isItemDetailsOpen}
+          onClose={() => setIsItemDetailsOpen(false)}
+          itemQuantity={itemQuantity}
+          side={side}
+        />
+        <ReviewOrderFlyout
+          isOpen={isReviewCartOpen}
+          onClose={() => setIsReviewCartOpen(false)}
+          itemQuantity={itemQuantity}
+          side={side}
+        />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiButton
@@ -132,7 +129,7 @@ const ShoppingCartFlyout = ({
 
 interface ReviewOrderProps
   extends ECommerceContentProps,
-    Pick<EuiFlyoutProps, 'onClose' | 'side'> {}
+    Pick<EuiFlyoutProps, 'onClose' | 'side' | 'isOpen'> {}
 
 const ReviewOrderFlyout = ({
   itemQuantity,
@@ -199,18 +196,20 @@ const ReviewOrderFlyout = ({
 
 interface ItemDetailsProps
   extends ECommerceContentProps,
-    Pick<EuiFlyoutProps, 'onClose' | 'id' | 'side'> {}
+    Pick<EuiFlyoutProps, 'onClose' | 'id' | 'side' | 'isOpen'> {}
 
 const ItemDetailsFlyout = ({
   onClose,
   itemQuantity,
   id = 'item-details-flyout',
   side = DEFAULT_SIDE,
+  isOpen,
 }: ItemDetailsProps) => {
   return (
     <EuiFlyout
       id={id}
       onClose={onClose}
+      isOpen={isOpen}
       size="s"
       side={side}
       aria-label="Item details"
@@ -398,32 +397,29 @@ const BasicExampleComponent = ({
           </EuiFlexGroup>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {isShoppingCartOpen && (
-        <ShoppingCartFlyout
-          onClose={() => setIsShoppingCartOpen(false)}
-          onQuantityChange={(delta: number) =>
-            setItemQuantity(itemQuantity + delta)
-          }
-          itemQuantity={itemQuantity}
-          ownFocus={shoppingCartOwnFocus}
-          side={side}
-        />
-      )}
-      {isReviewCartOpen && (
-        <ReviewOrderFlyout
-          onClose={() => setIsReviewCartOpen(false)}
-          itemQuantity={itemQuantity}
-          side={side}
-        />
-      )}
-      {isItemDetailsOpen && (
-        <ItemDetailsFlyout
-          id="shopping-cart-item-details-flyout"
-          onClose={() => setIsItemDetailsOpen(false)}
-          itemQuantity={itemQuantity}
-          side={side}
-        />
-      )}
+      <ShoppingCartFlyout
+        isOpen={isShoppingCartOpen}
+        onClose={() => setIsShoppingCartOpen(false)}
+        onQuantityChange={(delta: number) =>
+          setItemQuantity(itemQuantity + delta)
+        }
+        itemQuantity={itemQuantity}
+        ownFocus={shoppingCartOwnFocus}
+        side={side}
+      />
+      <ReviewOrderFlyout
+        isOpen={isReviewCartOpen}
+        onClose={() => setIsReviewCartOpen(false)}
+        itemQuantity={itemQuantity}
+        side={side}
+      />
+      <ItemDetailsFlyout
+        isOpen={isItemDetailsOpen}
+        id="shopping-cart-item-details-flyout"
+        onClose={() => setIsItemDetailsOpen(false)}
+        itemQuantity={itemQuantity}
+        side={side}
+      />
     </>
   );
 };