Disable button while event is submitting

app/routes/book-event.tsx

@@ -44,6 +44,7 @@ export default function () {
   const [eventType, setEventType] = useState("");
   const [riddleAnswer, setRiddleAnswer] = useState("");
   const [submitSuccess, setSubmitSuccess] = useState(false);
+  const [disableSubmit, setDisableSubmit] = useState(false);
 
   useEffect(() => {
     setDatePickerMin(`${new Date().toISOString().split("T").at(0)}`);
@@ -53,6 +54,7 @@ export default function () {
   }, []);
 
   async function submit() {
+    setDisableSubmit(true);
     let eventResp: Response;
 
     try {
@@ -69,6 +71,7 @@ export default function () {
         method: "POST",
       });
     } catch {
+      setDisableSubmit(false);
       toast({
         description: "Please check your internet and try again",
         isClosable: true,
@@ -86,6 +89,7 @@ export default function () {
         errorMessage = ((await eventResp.json()) as { error: string }).error;
       } catch {}
 
+      setDisableSubmit(false);
       toast({
         description: errorMessage,
         isClosable: true,
@@ -150,7 +154,11 @@ export default function () {
         onChange={(e) => setRiddleAnswer(e.target.value)}
         placeholder="Riddle answer"
       />
-      <Button mt="16px" onClick={async () => await submit()}>
+      <Button
+        disabled={disableSubmit}
+        mt="16px"
+        onClick={async () => await submit()}
+      >
         Book
       </Button>
     </Container>