diff --git a/@theme/markdoc/components.tsx b/@theme/markdoc/components.tsx
index 6fb6bdf090..5b98d38e8f 100644
--- a/@theme/markdoc/components.tsx
+++ b/@theme/markdoc/components.tsx
@@ -31,7 +31,8 @@ export function InteractiveBlock(props: { children: React.ReactNode; label: stri
   const { pathname } = useLocation();
 
   return (
-    <div className="interactive-block" id={'interactive-' + stepId}>
+    // add key={pathname} to ensure old step state gets rerendered on page navigation
+    <div className="interactive-block" id={'interactive-' + stepId}  key={pathname}>
       <div className="interactive-block-inner">
         <div className="breadcrumbs-wrap">
           <ul
@@ -53,7 +54,8 @@ export function InteractiveBlock(props: { children: React.ReactNode; label: stri
             })}
           </ul>
         </div>
-        <div className="interactive-block-ui" key={pathname}>{dynamicReact(props.children, React, {})}</div>
+
+        <div className="interactive-block-ui">{dynamicReact(props.children, React, {})}</div>
       </div>
     </div>
     );
diff --git a/static/js/interactive-tutorial.js b/static/js/interactive-tutorial.js
index 92484e6d54..765b587f52 100644
--- a/static/js/interactive-tutorial.js
+++ b/static/js/interactive-tutorial.js
@@ -629,6 +629,9 @@ async function show_log(block, msg) {
   block.find(".output-area").append(msg)
 }
 
+/**
+ * Run callback only when the current route is loaded.
+ */
 function onCurrentRouteLoaded(callback) {
   const currentPath = window.location.pathname;
   window.onRouteChange(() => {