Fix Async example

packages/example/src/routes/async.tsx

@@ -1,5 +1,5 @@
 import { HttpClient } from "@effect/platform"
-import { Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
+import { Container, Flex, Heading, Slider, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Array, Effect, flow, Option, Schema } from "effect"
 import { Async, Component, Memoized } from "effect-fc"
@@ -34,24 +34,31 @@ class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(
     )
 }).pipe(
     Async.async,
-    Async.withOptions({ defaultFallback: <Text>Loading post...</Text> }),
+    Async.withOptions({ defaultFallback: <Text>Default fallback</Text> }),
     Memoized.memoized,
 ) {}
 
 
 const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
+    const [text, setText] = React.useState("Typing here should not trigger a refetch of the post")
     const [id, setId] = React.useState(1)
+
     const AsyncFetchPost = yield* AsyncFetchPostView.use
 
     return (
         <Container>
-            <Flex direction="column" align="center" gap="2">
+            <Flex direction="column" align="stretch" gap="2">
+                <TextField.Root
+                    value={text}
+                    onChange={e => setText(e.currentTarget.value)}
+                />
+
                 <Slider
                     value={[id]}
                     onValueChange={flow(Array.head, Option.getOrThrow, setId)}
                 />
 
-                <AsyncFetchPost id={id} />
+                <AsyncFetchPost id={id} fallback={<Text>Loading post...</Text>} />
             </Flex>
         </Container>
     )