From ec8bad4678c5a51d6624c6de73e716c098ab0597 Mon Sep 17 00:00:00 2001
From: Felix Habib <fhabib@seek.com.au>
Date: Fri, 10 May 2024 11:33:40 +1000
Subject: [PATCH] Refactor, add back useEffect

---
 src/Playroom/Toolbar/Toolbar.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Playroom/Toolbar/Toolbar.tsx b/src/Playroom/Toolbar/Toolbar.tsx
index 54bd8d5e..0e652650 100644
--- a/src/Playroom/Toolbar/Toolbar.tsx
+++ b/src/Playroom/Toolbar/Toolbar.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState, useCallback } from 'react';
+import { useContext, useState, useCallback, useEffect } from 'react';
 import { useTimeoutFn } from 'react-use';
 import classnames from 'classnames';
 import type { PlayroomProps } from '../Playroom';
@@ -64,6 +64,12 @@ 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;
@@ -160,7 +166,6 @@ 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">