fix: hide Monitors without a patient checkbox filter is not toggling …

…state

src/Components/Facility/CentralNursingStation.tsx

@@ -1,5 +1,5 @@
 import useFullscreen from "../../Common/hooks/useFullscreen";
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
 import HL7PatientVitalsMonitor from "../VitalsMonitor/HL7PatientVitalsMonitor";
 import useFilters from "../../Common/hooks/useFilters";
 import Loading from "../Common/Loading";
@@ -39,6 +39,11 @@ export default function CentralNursingStation({ facilityId }: Props) {
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: PER_PAGE_LIMIT,
   });
+  const [isBedOccupied, setIsBedOccupied] = useState<boolean>(
+    qParams.bed_is_occupied === undefined
+      ? true
+      : qParams.bed_is_occupied === "true"
+  );
   const query = useQuery(routes.listPatientAssetBeds, {
     pathParams: { facility_external_id: facilityId },
     query: {
@@ -151,16 +156,10 @@ export default function CentralNursingStation({ facilityId }: Props) {
                     <CheckBoxFormField
                       name="bed_is_occupied"
                       label="Hide Monitors without Patient"
-                      value={
-                        qParams.bed_is_occupied === "true" ||
-                        qParams.bed_is_occupied === undefined
-                      }
+                      value={isBedOccupied}
                       onChange={({ name, value }) => {
-                        if (value) {
-                          updateQuery({ [name]: value });
-                        } else {
-                          removeFilter(name);
-                        }
+                        updateQuery({ [name]: value });
+                        setIsBedOccupied(value);
                       }}
                       labelClassName="text-sm"
                       errorClassName="hidden"