diff --git a/packages/example/src/App.tsx b/packages/example/src/App.tsx
index 34163d6..0e6f3ec 100644
--- a/packages/example/src/App.tsx
+++ b/packages/example/src/App.tsx
@@ -1,3 +1,5 @@
+import { Console } from "effect"
+import { useState } from "react"
 import "./App.css"
 import reactLogo from "./assets/react.svg"
 import { Reffuse } from "./Reffuse"
@@ -6,7 +8,11 @@ import viteLogo from "/vite.svg"
 
 export function App() {
 
-  const [count, setCount] = Reffuse.useRefState(Reffuse.useRef(0))
+  Reffuse.runSync(Console.log("test"))
+
+  // const [count, setCount] = Reffuse.useRefState(Reffuse.useRef(0))
+  const [count, setCount] = useState(0)
+
 
   return <>
       <div>
diff --git a/packages/reffuse/src/Reffuse.ts b/packages/reffuse/src/Reffuse.tsx
similarity index 93%
rename from packages/reffuse/src/Reffuse.ts
rename to packages/reffuse/src/Reffuse.tsx
index 566de63..5717a89 100644
--- a/packages/reffuse/src/Reffuse.ts
+++ b/packages/reffuse/src/Reffuse.tsx
@@ -7,12 +7,15 @@ export class Reffuse<R, ER> {
     constructor(
         private readonly runtime: ManagedRuntime.ManagedRuntime<R, ER>
     ) {
-        this.Context = React.createContext(runtime)
+        const Context = React.createContext(runtime)
+        this.Context = Context
 
-        this.Provider = (props: { readonly children?: React.ReactNode }) => this.Context({
-            ...props,
-            value: this.runtime,
-        })
+        this.Provider = (props: { readonly children?: React.ReactNode }) => (
+            <Context
+                {...props}
+                value={runtime}
+            />
+        )
     }
 
     readonly Context: React.Context<ManagedRuntime.ManagedRuntime<R, ER>>