fixed type errors

src/components/SessionForm/HitSearchCard.tsx

@@ -6,9 +6,8 @@ import { useState } from "react";
 
 const SessionCard = () => {
   const [searchTerm, setSearchTerm] = useState("");
-  const { state, disptach } = useAlertHitContext();
+  const { dispatch } = useAlertHitContext();
 
-  console.log(state);
   return (
     <Card>
       <CardHeader title={"Hit Search"} />
@@ -27,16 +26,29 @@ const SessionCard = () => {
               type="text"
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
               placeholder="Enter VRM"
+              value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
           </div>
         </FormGroup>
         <button
           className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          onClick={() => disptach({ type: "SEARCH", payload: searchTerm })}
+          onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
+          disabled={searchTerm.trim().length < 2}
         >
           Search Hit list
         </button>
+        {searchTerm && (
+          <button
+            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full max-w-md"
+            onClick={() => {
+              setSearchTerm("");
+              dispatch({ type: "SEARCH", payload: "" });
+            }}
+          >
+            Clear Search
+          </button>
+        )}
       </div>
     </Card>
   );