diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx
index 8a45972f..fdffc7c1 100644
--- a/src/Playroom/Toolbar/Toolbar.tsx
+++ b/src/Playroom/Toolbar/Toolbar.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState, useCallback, useEffect } from 'react';
+import { useContext, useState, useCallback } from 'react';
 import { useTimeoutFn } from 'react-use';
 import classnames from 'classnames';
 import type { PlayroomProps } from '../Playroom';
@@ -63,12 +63,6 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
   const [lastActivePanel, setLastActivePanel] =
     useState<typeof activeToolbarPanel>(undefined);
 
-  useEffect(() => {
-    if (activeToolbarPanel) {
-      setLastActivePanel(activeToolbarPanel);
-    }
-  }, [activeToolbarPanel]);
-
   const hasSnippets = snippets && snippets.length > 0;
   const hasFilteredFrames =
     visibleThemes.length > 0 || visibleWidths.length > 0;
@@ -165,6 +159,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
           classNames={styles.transitionStyles}
           mountOnEnter
           unmountOnExit
+          onEnter={() => setLastActivePanel(activeToolbarPanel)}
           onExited={() => setLastActivePanel(undefined)}
         >
           <div className={styles.panel} id="custom-id">