📝(react) add story for Select mono

Add story for searchable controlled with async options fetching
mono select.

packages/react/src/components/Forms/Select/mono.stories.tsx

@@ -18,6 +18,7 @@ import {
 } from ":/components/Forms/Select/stories-utils";
 import { Modal, ModalSize, useModal } from ":/components/Modal";
 import { Input } from ":/components/Forms/Input";
+import { CunninghamProvider } from ":/components/Provider";
 
 export default {
   title: "Components/Forms/Select/Mono",
@@ -241,6 +242,42 @@ export const SearchableUncontrolledWithAsyncOptionsFetchingAndDefaultValue =
     );
   };
 
+export const SearchableControlledWithAsyncOptionsFetching = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [value, setValue] = useState<string | number | undefined>("woodbury");
+
+  const fetchAsyncOptions = async (context: ContextCallbackFetchOptions) => {
+    let arrayOptions: Option[] = [];
+
+    setIsLoading(true);
+    try {
+      arrayOptions = await fetchOptions(context, OPTIONS, 1000);
+    } catch (error) {
+      /* empty */
+    }
+
+    setIsLoading(false);
+    return arrayOptions;
+  };
+
+  return (
+    <CunninghamProvider>
+      <div>
+        <div>Value = {value}|</div>
+        <Button onClick={() => setValue(undefined)}>Clear</Button>
+        <Select
+          label="City"
+          options={fetchAsyncOptions}
+          searchable={true}
+          isLoading={isLoading}
+          value={value}
+          onChange={(e) => setValue(e.target.value as string)}
+        />
+      </div>
+    </CunninghamProvider>
+  );
+};
+
 export const SearchableDisabled = {
   render: Template,