1 files changed, 9 insertions, 8 deletions
diff --git a/vnext/src/ui/SearchBox.js b/vnext/src/ui/SearchBox.js
index c79c9e8f..e6085fdc 100644
--- a/vnext/src/ui/SearchBox.js
+++ b/vnext/src/ui/SearchBox.js
@@ -1,4 +1,4 @@
-import { useFormState } from 'react-use-form-state';
+import { useForm } from 'react-hook-form';
 
 /**
  * @typedef {Object} SearchBoxPropsFields
@@ -13,15 +13,16 @@ import { useFormState } from 'react-use-form-state';
  * @param {SearchBoxProps} props
  */
 function SearchBox({ onSearch }) {
-    let onSubmit = (/** @type React.FormEvent<HTMLFormElement> */ event) => {
-        event.preventDefault();
-        onSearch(formState.values.search);
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    /** @type { import('react-hook-form').SubmitHandler<import('react-hook-form').FieldValues> } */
+    let onSubmit = ( values ) => {
+        onSearch(values.search);
     };
-    const [formState, { text }] = useFormState();
     return (
-        <form onSubmit={onSubmit}>
-            <input name="search" className="text"
-                placeholder="Search..." value={formState.values.search} {...text('search')} />
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <input className="text" type="text"
+                placeholder="Search..." {...register('search')} />
+            <input data-testid="submit" type="submit" hidden />
         </form>
     );
 }