diff --git a/src/components/Playground.js b/src/components/Playground.js
index 367c6602..1cd456ec 100644
--- a/src/components/Playground.js
+++ b/src/components/Playground.js
@@ -48,7 +48,7 @@ function Playground() {
           </div>
         </div>
 
-        <PlaygroundPanels />
+        <PlaygroundPanels state={state} dispatch={dispatch} />
       </div>
     </Layout>
   );
diff --git a/src/components/PlaygroundPanels.js b/src/components/PlaygroundPanels.js
index 674322d7..65142541 100644
--- a/src/components/PlaygroundPanels.js
+++ b/src/components/PlaygroundPanels.js
@@ -1,8 +1,5 @@
 import React, { Suspense } from 'react';
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
-
-import usePlayground from '../hooks/usePlayground';
 
 import Query from './Query';
 import Result from './Result';
@@ -20,9 +17,7 @@ function Paper({ children }) {
   );
 }
 
-function PlaygroundPanels() {
-  const { gistId, gistVersion } = useParams();
-  const [state, dispatch] = usePlayground({ gistId, gistVersion });
+function PlaygroundPanels({ state, dispatch }) {
   const { query, result } = state;
   const [panel, setPanel] = useState(panels[0]);