How do I set up a state in react in onClick with filter which depends on a series of checkbox fields

here are my checkboxes ** In room I have the data from json, I have to filter based on fields and show cards based on filtering, and even more fields can be filtered at the same time**

export const Header = ({ handleFlagAvailable, handleFlagPrivateRoom, handleFlagEntireProperty, handleFlagSharedRoom, handleFlagStudio, }) => { return ( <Dropdown.ItemText> <Form.Check onClick={handleFlagPrivateRoom} className="ms-1 fs-6" aria-label="option 1" label="Private room" /> </Dropdown.ItemText> <Dropdown.ItemText> <Form.Check onClick={handleFlagEntireProperty} className="ms-1 fs-6" aria-label="option 1" label="Entire property" /> </Dropdown.ItemText> <Dropdown.ItemText> <Form.Check onClick={handleFlagSharedRoom} className="ms-1 fs-6" aria-label="option 1" label="Shared room" /> </Dropdown.ItemText> <Dropdown.ItemText> <Form.Check onClick={handleFlagStudio} className="ms-1 fs-6" aria-label="option 1" label="Studio" /> </Dropdown.ItemText> Disponibile <Form.Check onClick={handleFlagAvailable} className="ms-3" aria-label="option 1" />

---

);

  function App() {
      const [rooms, setRooms] = useState([]);   
      const [fieldAvailableFlag, setFieldAvailableFlag] = useState(false);
      const [fieldPrivateRoomFlag, setFieldPrivateRoomFlag] = useState(false);
      const [fieldEntirePropertyFlag, setFieldEntirePropertyFlag] = useState(false);
      const [fieldSharedRoomFlag, setFieldSharedRoomFlag] = useState(false);
      const [fieldStudioFlag, setFieldStudioFlag] = useState(false);
        useEffect(() => {
        var getRooms = async () => {
          const roomsFromServer = await fetchRooms();
          setRooms(roomsFromServer);
        };
        // console.log(rooms);
        getRooms();
      }, []);
     const debugFieldFlag = (e) => {
        if (
          !fieldAvailableFlag &&
          !fieldPrivateRoomFlag &&
          !fieldEntirePropertyFlag &&
          !fieldSharedRoomFlag &&
          !fieldStudioFlag
        ) {
        } else
          return rooms.filter((room) => {
            if (fieldAvailableFlag) {
              setRooms(room.available === true);
            }
            if (fieldPrivateRoomFlag) {
              return room.type === "Private Room";
            }
            if (fieldEntirePropertyFlag) {
              return room.type === "Entire Property";
            }
            if (fieldSharedRoomFlag) {
              return room.type === "Shared Room";
            }
            if (fieldStudioFlag) {
              return room.type === "Studio";
            }
          });
      };
     return (
        <div className="container mt-5 ms-auto">
          <Header
            handleFlagAvailable={(e) => setFieldAvailableFlag(e.target.checked)}
            handleFlagPrivateRoom={(e) => setFieldPrivateRoomFlag(e.target.checked)}
            handleFlagEntireProperty={(e) =>
              setFieldEntirePropertyFlag(e.target.checked)
            }
            handleFlagSharedRoom={(e) => setFieldSharedRoomFlag(e.target.checked)}
            handleFlagStudio={(e) => setFieldStudioFlag(e.target.checked)}
            onClick={debugFieldFlag()}
          />
          <Rooms rooms={rooms} />
        </div> 
     );
   }