cleaner flow in select (but there's also a bug oops)

packages/reacord/playground/fruit-select.tsx

@@ -1,17 +1,15 @@
 import React, { useState } from "react"
 import { Button, Option, Select } from "../library/main"
 
-export function FruitSelect() {
+export function FruitSelect({
+  onConfirm,
+}: {
+  onConfirm: (choice: string) => void
+}) {
   const [value, setValue] = useState<string>()
-  const [finalChoice, setFinalChoice] = useState<string>()
-
-  if (finalChoice) {
-    return <>you chose {finalChoice}</>
-  }
 
   return (
     <>
-      {"_ _"}
       <Select
         placeholder="choose a fruit"
         value={value}
@@ -24,7 +22,9 @@ export function FruitSelect() {
       <Button
         label="confirm"
         disabled={value == undefined}
-        onClick={() => setFinalChoice(value)}
+        onClick={() => {
+          if (value) onConfirm(value)
+        }}
       />
     </>
   )

packages/reacord/playground/main.tsx

@@ -58,7 +58,15 @@ createCommandHandler(client, [
     name: "select",
     description: "shows a select",
     run: (interaction) => {
-      reacord.reply(interaction, <FruitSelect />)
+      const instance = reacord.reply(
+        interaction,
+        <FruitSelect
+          onConfirm={(value) => {
+            instance.render(`you chose ${value}`)
+            instance.deactivate()
+          }}
+        />,
+      )
     },
   },
   {