diff --git a/packages/react/_debug/app.tsx b/packages/react/_debug/app.tsx
new file mode 100644
index 0000000..32b1dd8
--- /dev/null
+++ b/packages/react/_debug/app.tsx
@@ -0,0 +1,17 @@
+import React, { FC, useState } from 'react'
+import Utterances from '../lib/Utterances'
+import { Theme } from '@shared/types'
+
+const App: FC = () => {
+  const [theme, changeTheme] = useState<Theme>('github-light')
+  const handleClick = () =>
+    changeTheme(theme === 'github-light' ? 'github-dark' : 'github-light')
+  return (
+    <>
+      <button onClick={handleClick}>switch</button>
+      <Utterances repo="TomokiMiyauci/me" theme={theme} issueTerm="pathname" />
+    </>
+  )
+}
+
+export default App
diff --git a/packages/react/_debug/main.tsx b/packages/react/_debug/main.tsx
index c948837..71b25ae 100644
--- a/packages/react/_debug/main.tsx
+++ b/packages/react/_debug/main.tsx
@@ -1,14 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-import Utterances from '../lib/Utterances'
+import { render } from 'react-dom'
+import App from './app'
 
-ReactDOM.render(
+render(
   <React.StrictMode>
-    <Utterances
-      repo="TomokiMiyauci/utterances-component"
-      theme="github-dark"
-      issueTerm="pathname"
-    />
+    <App />
   </React.StrictMode>,
   document.getElementById('root')
 )
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 0ea4d31..64a9f05 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -21,5 +21,5 @@
       "@shared/*": ["../@shared/*"]
     }
   },
-  "include": ["./lib"]
+  "include": ["./lib", "./_debug"]
 }