Generate button is disabled when there are no valued selected

src/frontend/Components/Buttons/Generate.tsx

@@ -1,12 +1,13 @@
 import { Button } from "@mui/material";
 import { SelectedValuesContext } from "../../context/SelectedValuesContext";
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import api from "../..";
 import { TimetableDataContext } from "../../context/TimetableDataContext";
 import { TimetableResponse } from "../../../backend/api/routes/responseTypes";
 import { edenFetch } from "../fetchAndSet";
 
 export default function Generate() {
+    const isDisabled = useRef(true);
     const { selectedValues } = useContext(SelectedValuesContext);
     const { setTimetable, setAvailable } = useContext(TimetableDataContext);
     const handleClick = () => {
@@ -24,8 +25,22 @@ export default function Generate() {
                 });
         });
     };
+
+    useEffect(() => {
+        if (!selectedValues.division.value || !selectedValues.department.value) {
+            isDisabled.current = true;
+        } else {
+            isDisabled.current = false;
+        }
+    }, [selectedValues.division.value, selectedValues.department.value]);
+
     return (
-        <Button variant="contained" sx={{ height: "3rem" }} onClick={handleClick}>
+        <Button
+            variant="contained"
+            sx={{ height: "3rem" }}
+            onClick={handleClick}
+            disabled={isDisabled.current}
+        >
             Generate New
         </Button>
     );