docs(components/radio): make invalid code example controlled and ha…

…ve both valid and invalid options (a more realistic example of its use) (heroui-inc#746)

apps/docs/content/components/radio/invalid.ts

@@ -1,18 +1,26 @@
-const App = `import { Radio } from "@nextui-org/react";
+const App = `import React from "react";
+import { Radio } from "@nextui-org/react";
 
 export default function App() {
+  const [selected, setSelected] = React.useState('A');
+
   return (
-    <Radio.Group label="Options" defaultValue="A" validationState="invalid">
-      <Radio value="A" description="Description for Option A">
+    <Radio.Group
+      label="Options"
+      value={selected}
+      onChange={setSelected}
+      validationState={["A", "C"].includes(selected) ? 'valid' : 'invalid'}
+      >
+      <Radio value="A" description="A perfectly valid option">
         Option A
       </Radio>
-      <Radio value="B" description="Description for Option B">
+      <Radio value="B" description="Definitely not valid">
         Option B
       </Radio>
-      <Radio value="C" description="Description for Option C">
+      <Radio value="C" description="Another valid option">
         Option C
       </Radio>
-      <Radio value="D" description="Description for Option D">
+      <Radio value="D" description="Uh oh, invalid!">
         Option D
       </Radio>
     </Radio.Group>