hi I have a react project i created a component that is a modal on Windows and a drawer on mobile, and I created a context for that with useContext of react, this is my code:
context code:
```
"use client";
import { createContext, useEffect, useState } from "react";
// import { usePathname } from "next/navigation";

export const ModalDrawerContext = createContext<any>(null);

export const ModalDrawerProvider = ({ children }: any) => {
//   const pathname = usePathname();
  const [mobileModalHeight, setMobileModalHeight] = useState("80%");
  const [toggleModal, setToggleModal] = useState<boolean>(false);
  const [innerModalJSX, setInnerModalJSX] = useState<any>(null);
  const [modalHeader, setModalHeader] = useState<string>("");
  const [maxWidth, setMaxWidth] = useState("max-w-2xl");

//   useEffect(() => {
//     setToggleModal(false);
//   }, [pathname]);

  return (
    <ModalDrawerContext.Provider
      value={{
        toggleModal,
        setToggleModal,
        innerModalJSX,
        setInnerModalJSX,
        modalHeader,
        setModalHeader,
        maxWidth,
        setMaxWidth,
        mobileModalHeight,
        setMobileModalHeight,
      }}
    >
      {children}
    </ModalDrawerContext.Provider>
  );
};

```
this modal code:
```
import { ModalDrawerContext } from "@src/context/ModalDrawerContext";
import { FormEvent, ReactNode, useContext } from "react";
import { FiX } from "react-icons/fi";
import { IoIosCloseCircleOutline } from "react-icons/io";

export interface ModalPropsType {
  children: ReactNode;
  toggleShowModal: boolean;
  setToggleShowModal: React.Dispatch<React.SetStateAction<boolean>>;
}

function ModalDrawer({ toggleShowModal, setToggleShowModal }: ModalPropsType) {
  const {
    innerModalJSX,
    setInnerModalJSX,
    modalHeader,
    setModalHeader,
    maxWidth,
    mobileModalHeight,
  } = useContext(ModalDrawerContext);
  const windowWidth = window.innerWidth;

  const toggleModalHandler = (e: FormEvent, value: boolean) => {
    if (e.currentTarget === e.target) {
      setToggleShowModal(value);
      // if modal closed, clear the (jsx) in modal
      if (!value) {
        setInnerModalJSX(null);
        setModalHeader("");
      }
    }
  };

  return (
    <>
      {toggleShowModal && (
        <>
          {windowWidth >= 640 ? (
            <>
              {/* desktop modal */}
              <div className="hidden sm:block">
                <div
                  onMouseDownCapture={(e) => toggleModalHandler(e, false)}
                  className="justify-center backdrop-blur-md dark:bg-[rgba(0,0,0,0.1)] items-center z-[1300] flex h-[100vh] w-[100vw] overflow-hidden fixed inset-0 outline-none focus:outline-none"
                >
                  <div
                    className={`relative w-[90vw] mx-auto ${
                      maxWidth || "max-w-2xl"
                    }`}
                  >
                    {/*content*/}
                    <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full dark:bg-darkEl dark:shadow-dark bg-white outline-none focus:outline-none">
                      <div className="relative flex-auto">
                        {/* head */}
                        <div className="flex shadow-md bg-white dark:bg-darkElementBg sticky top-0 p-6 border-b dark:border-b-darkSecondaryText justify-between items-center">
                          <span className="text-xl dark:text-darkText font-bold">
                            {modalHeader}
                          </span>
                          <FiX
                            onClick={(e) => toggleModalHandler(e, false)}
                            className="h-4 w-4 cursor-pointer dark:stroke-darkText"
                          />
                        </div>
                        {/* main */}
                        <div className="max-h-[75vh] dark:bg-darkBg">
                          {innerModalJSX}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  onClick={(e) => toggleModalHandler(e, false)}
                  className="opacity-25 fixed z-40 inset-0 bg-black"
                ></div>
              </div>
            </>
          ) : (
            <>
              {/* mobile modal */}
              <div className="block sm:hidden">
                <div
                  className="fixed inset-0 z-[1300] flex items-end justify-center bg-black bg-opacity-50"
                  onClick={(e) => toggleModalHandler(e, false)}
                >
                  {/* Modal Box */}
                  <div
                    style={{
                      animation: "slideUp 0.3s ease-in-out",
                      height: mobileModalHeight,
                    }}
                    className={`w-full bg-white rounded-t-lg shadow-lg transform transition-transform duration-300 ${
                      toggleShowModal ? "translate-y-0" : "translate-y-full"
                    }`}
                    // onClick={(e) => e.stopPropagation()} // Prevent backdrop click from closing the modal
                  >
                    {/* Modal Header */}
                    <div className="flex items-center justify-between p-4 border-b dark:bg-darkElementBg">
                      <h2 className="text-lg dark:text-darkText font-semibold">
                        {modalHeader}
                      </h2>
                      <button
                        onClick={() => setToggleShowModal(false)}
                        className="hover:text-gray-900"
                      >
                        <IoIosCloseCircleOutline className="w-6 h-6 fill-gray-600 dark:fill-darkText" />
                      </button>
                    </div>
                    {/* Modal Content */}
                    <div className="h-full dark:bg-darkBg">{innerModalJSX}</div>
                  </div>
                </div>
              </div>
            </>
          )}

          {/* Custom Animation Styles for mobile */}
          <style>{`
          @keyframes slideUp {
            0% {
              transform: translateY(100%);
            }
            100% {
              transform: translateY(0);
            }
          }
      `}</style>
        </>
      )}
    </>
  );
}

export default ModalDrawer;
```
this my provider:
```
"use client";;

import { useContext } from "react";
import { ModalDrawerContext } from "./context/ModalDrawerContext";
import ModalDrawer from "./common/Modal/ModalDrawer";

const ModalInit = () => {
    const { toggleModal, setToggleModal, jsxHolder } = useContext(ModalDrawerContext);

    if (toggleModal)
        return (
            <ModalDrawer toggleShowModal={toggleModal} setToggleShowModal={setToggleModal}>
                {jsxHolder}
            </ModalDrawer>
        );
};

export default ModalInit;

```
and this is my main.tsx file:
```
import {
  React,
  BrowserRouter,
  ThemeProvider,
  AuthProvider,
  ToastContainer,
} from "@imports";
import ReactDOM from "react-dom/client";
import "@src/globals.css";
import "@styles/index.scss";
import App from "@src/App";
import Providers from "@src/Providers";
import "react-toastify/dist/ReactToastify.css";
import { ModalProvider } from "./context/ModalContext";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Providers>
      <BrowserRouter>
        <ModalProvider>
          <AuthProvider>
            <ThemeProvider>
              <App />
              <ToastContainer
                rtl
                autoClose={10000}
                position="top-left"
                style={{ marginTop: "50px" }}
              />
            </ThemeProvider>
          </AuthProvider>
        </ModalProvider>
      </BrowserRouter>
    </Providers>
  </React.StrictMode>
);

// remove console on (production) mode
if (import.meta.env.VITE_NODE_ENV !== "development") console.log = () => {};

```
and this is how I use it:
```
import {
  Box,
  Button,
  ConfirmModalComponent,
  Controller,
  getApp,
  getMenu,
  getRoles,
  getUsers,
  Grid,
  Loading,
  ModalComponent,
  SelectField,
  toast,
  useEffect,
  useForm,
  useMutationRequest,
  useQueryRequest,
  userAccess,
  yupResolver,
} from "@src/imports";
import { AssignMenuFormSchema } from "@src/schema";
import {
  OutputUseMutationType,
  OutputUseQueryType,
} from "@src/types/generalTypes";
import {
  AppDataType,
  AssignMenuActions,
  AssignMenuActionTypes,
  AssignMenuReturnedData,
  AssignMenuStateType,
  AssignMenuStateTypes,
  GetAppType,
  GetMenuData,
  GetMenuType,
  GetMneuServiceParamsType,
  GetRolesData,
  GetRolesServiceParamsType,
  GetUsersData,
  GetUserServiceParamsType,
  GetUsersType,
  ReturnGetRoleType,
  UserAccessType,
} from "@src/types/services/assignMenuType";
import { Suspense, useContext, useReducer, useRef, useState } from "react";
import { SelectInstance } from "react-select";
import { InferType } from "yup";
import ItemList from "./MenuList";
import { StatusMessage } from "@src/types/services/commonServicesTypes";
import { ModalDrawerContext } from "@src/context/ModalDrawerContext";

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 600,
  height: 500,
  bgcolor: "background.paper",
  border: "2px solid #000",
  boxShadow: 24,
  p: 4,
};

type DmutateFn<Tparams, DretunedData> = (
  params: Tparams
) => Promise<DretunedData>;

const initialState: AssignMenuStateType = {
  roleData: undefined,
  userData: undefined,
  menuData: undefined,
};

const reducer = (state: AssignMenuStateType, action: AssignMenuActions) => {
  switch (action.type) {
    case AssignMenuActionTypes.SET_ROLES:
      return { ...state, roleData: action.payload };
    case AssignMenuActionTypes.SET_USERS:
      return { ...state, userData: action.payload };
    case AssignMenuActionTypes.SET_MENU:
      return { ...state, menuData: action.payload };
    default:
      return state;
  }
};

const AssignMneuForm = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const [open, setOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const handleOpen = () => showMenuListModal()
  const handleClose = () => setOpen(false);

  const [checkedItems, setCheckedItems] = useState<number[]>([]);
  let roleRef = useRef<SelectInstance<GetRolesData>>(null);
  let userRef = useRef<SelectInstance<GetUsersData>>(null);
  // let menuRef = useRef<SelectInstance<GetMenuData>>(null);
  const {
    handleSubmit,
    control,
    setValue,
    watch,
    getValues,
    formState: { errors },
  } = useForm({
    mode: "onTouched",
    resolver: yupResolver(AssignMenuFormSchema),
    defaultValues: {
      userId: undefined,
      menuItems: undefined,
      appId: undefined,
      roleId: undefined,
    },
  });

  useEffect(() => {
    const modifiedMenuItems = checkedItems.map((item) => {
      return {
        menuID: item,
      };
    });
    setValue("menuItems", modifiedMenuItems);
  }, [checkedItems]);

  const {
    data: getAppIdOptions,
    isLoading: getAppIdLoding,
  }: OutputUseQueryType<GetAppType> = useQueryRequest({
    queryFn: getApp,
    queryKey: "get-app-data",
  });

  const {
    mutateAsync: getRolesOptions,
    isLoading: getRolesLoding,
  }: OutputUseMutationType<GetRolesServiceParamsType, ReturnGetRoleType> =
    useMutationRequest(getRoles);

  const {
    mutateAsync: getUsersOptions,
    isLoading: getUsersLoding,
  }: OutputUseMutationType<GetUserServiceParamsType, GetUsersType> =
    useMutationRequest(getUsers);

  const {
    mutateAsync: getMenuOptions,
    isLoading: getMenuLoding,
  }: OutputUseMutationType<GetMneuServiceParamsType, GetMenuType> =
    useMutationRequest(getMenu);

  const {
    mutateAsync: postUserAccess,
    isLoading: postUserAccessLoding,
  }: OutputUseMutationType<UserAccessType, StatusMessage> =
    useMutationRequest(userAccess);

  const onSubmit = async (data: InferType<typeof AssignMenuFormSchema>) => {
    console.log(data);
    const streucturedData = {
      userID: data.userId,
      menuItems: data.menuItems,
    };
    console.log(streucturedData);
    const responseData = await postUserAccess(streucturedData);
    if (responseData && responseData.status) {
      console.log(responseData);
      toast.success(responseData.message);
      setConfirmOpen(false);
    }
  };

  const loadAssignMenuDataHandler = async <
    Tparams,
    DretunedData extends AssignMenuReturnedData
  >(
    params: Tparams,
    mutateFn: DmutateFn<Tparams, DretunedData>,
    type: "user" | "role" | "app"
  ): Promise<AssignMenuStateTypes> => {
    if (type === "app") {
      userRef.current!.clearValue();
      roleRef.current!.clearValue();
    } else if (type === "role") {
      userRef.current!.clearValue();
    }
    try {
      const data: DretunedData = await mutateFn(params);
      console.log(data, type, " injaaaaa");
      return data?.data; // Ensure this matches the expected return type
    } catch (error) {
      console.error("Error loading data:", error);
      throw error; // Rethrow the error if you want to handle it later
    }
  };

  const extractCheckedIds = (items: GetMenuData[]): number[] => {
    let exCheckedIds: number[] = [];

    items.forEach((item) => {
      if (item.checkflag) {
        exCheckedIds.push(item.id);
      }
      if (item.child && item.child.length > 0) {
        exCheckedIds = exCheckedIds.concat(extractCheckedIds(item.child));
      }
    });

    return exCheckedIds;
  };

  useEffect(() => {
    // Initialize checkedItems based on items' checkflag
    if (state.menuData) {
      const extractChecked = extractCheckedIds(state.menuData);
      setCheckedItems(extractChecked);
    }
  }, [state.menuData]);

  const { setToggleModal, setModalHeader, setInnerModalJSX } =
    useContext(ModalDrawerContext);

  const showMenuListModal = () => {
    setToggleModal(true);
    setModalHeader("لیست دسترسی ها");
    setInnerModalJSX(
      <Suspense fallback={<Loading />}>
        <div>
          <ItemList
            items={state.menuData && state.menuData}
            checkedItems={checkedItems}
            setCheckedItems={setCheckedItems}
          />
          {/* <CheckboxTree data={state.menuData && state.menuData} /> */}
        </div>
        <div className="flex justify-end m-1 mt-3">
          <Button
            variant="contained"
            onClick={() => setConfirmOpen(true)}
            color="primary"
            disabled={postUserAccessLoding}
          >
            ثبت دسترسی ها
          </Button>
        </div>
        <ConfirmModalComponent
          confirmAction={handleSubmit(onSubmit)}
          onClose={() => setConfirmOpen(false)}
          openModal={confirmOpen}
          title="آیا میخواهید تغییرات ثبت شود؟"
        />
      </Suspense>
    );
  };

  useEffect(() => {
    if(open){
      handleOpen()
    }
  },[open])

  return (
    <div className="flex flex-col gap-4 w-full">
      <form
        className="w-full flex flex-col gap-4"
        onSubmit={handleSubmit(onSubmit)}
      >
        <Grid container spacing={1}>
          <Grid item xs={12} md={4} lg={3}>
            <Controller
              name="appId"
              control={control}
              render={({ field }) => (
                <SelectField
                  isLoading={getAppIdLoding}
                  {...field}
                  onChange={async (val: AppDataType) => {
                    if (!!val && val.appID !== 0) {
                      field.onChange(val.appID);

                      const data = await loadAssignMenuDataHandler(
                        { params: { _AppID: val.appID } },
                        getRolesOptions,
                        "app"
                      );
                      dispatch({
                        type: AssignMenuActionTypes.SET_ROLES,
                        payload: data as GetRolesData[],
                      });
                    }
                  }}
                  options={getAppIdOptions && getAppIdOptions?.data}
                  label="برنامه"
                  error={errors.appId?.message}
                  getOptionLabel={(option: AppDataType) =>
                    option.name ? option.name : "بدون نام"
                  }
                  getOptionValue={(option: AppDataType) => option.appID}
                  isRequired={true}
                />
              )}
            />
          </Grid>
          <Grid item xs={12} md={4} lg={3}>
            <Controller
              name="roleId"
              control={control}
              render={({ field }) => (
                <SelectField
                  selectRef={roleRef}
                  disabled={!watch("appId")}
                  isLoading={getRolesLoding}
                  {...field}
                  value={field.value}
                  onChange={async (val: GetRolesData) => {
                    if (!!val && val.roleID !== 0) {
                      field.onChange(val.roleID);
                      const data = await loadAssignMenuDataHandler(
                        {
                          params: {
                            _AppID: getValues("appId"),
                            _RoleID: val.roleID,
                          },
                        },
                        getUsersOptions,
                        "role"
                      );
                      dispatch({
                        type: AssignMenuActionTypes.SET_USERS,
                        payload: data as GetUsersData[],
                      });
                    }
                  }}
                  options={state.roleData}
                  label="نقش کاربر"
                  error={errors.appId?.message}
                  getOptionLabel={(option: GetRolesData) => option.roleName}
                  getOptionValue={(option: GetRolesData) => option.roleID}
                  isRequired={true}
                />
              )}
            />
          </Grid>
          <Grid item xs={12} md={4} lg={3}>
            <Controller
              name="userId"
              control={control}
              render={({ field }) => (
                <SelectField
                  disabled={!watch("roleId")}
                  selectRef={userRef}
                  isLoading={getUsersLoding}
                  {...field}
                  onChange={async (val: GetUsersData) => {
                    if (!!val && val.userID !== 0) {
                      field.onChange(val.userID);
                      const data = await loadAssignMenuDataHandler(
                        {
                          params: {
                            _AppID: getValues("appId"),
                            _RoleID: getValues("roleId"),
                            _UserID: val.userID,
                          },
                        },
                        getMenuOptions,
                        "user"
                      );
                      console.log(data, " menu data");
                      dispatch({
                        type: AssignMenuActionTypes.SET_MENU,
                        payload: data as GetMenuData[],
                      });
                      setOpen(true);
                    }
                  }}
                  options={state?.userData}
                  label="کاربر مورد نظر"
                  error={errors.appId?.message}
                  getOptionLabel={(option: GetUsersData) => option.name}
                  getOptionValue={(option: GetUsersData) => option.userID}
                  isRequired={true}
                />
              )}
            />
          </Grid>
        </Grid>
        {state.menuData && (
          <>
            <Button
              color="primary"
              disabled={getMenuLoding}
              onClick={handleOpen}
            >
              لیست دسترسی ها
            </Button>
            {/* <ModalComponent
              title="لیست منو ها"
              openModal={open}
              onClose={handleClose}
              aria-labelledby="modal-modal-title"
              aria-describedby="modal-modal-description"
            >
              <div>
                <ItemList
                  items={state.menuData && state.menuData}
                  checkedItems={checkedItems}
                  setCheckedItems={setCheckedItems}
                />
              </div>
              <div className="flex justify-end m-1 mt-3">
                <Button
                  variant="contained"
                  onClick={() => setConfirmOpen(true)}
                  color="primary"
                  disabled={postUserAccessLoding}
                >
                  ثبت دسترسی ها
                </Button>
              </div>
            </ModalComponent> */}
          </>
        )}
        <ConfirmModalComponent
          confirmAction={handleSubmit(onSubmit)}
          onClose={() => setConfirmOpen(false)}
          openModal={confirmOpen}
          title="آیا میخواهید تغییرات ثبت شود؟"
        />
      </form>
    </div>
  );
};

export default AssignMneuForm;

```
and this is my MneuList component:
```
import React, { useEffect, useState } from "react";
import { Checkbox, FormControlLabel } from "@mui/material";
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Typography,
} from "@src/imports";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { GetMenuData } from "@src/types/services/assignMenuType";



interface ItemListProps {
  items: GetMenuData[];
  checkedItems: number[];
  setCheckedItems: React.Dispatch<React.SetStateAction<number[]>>;
}

const ItemList: React.FC<ItemListProps> = ({
  items,
  checkedItems,
  setCheckedItems,
}) => {
  const [openAccordions, setOpenAccordions] = useState<number[]>([]);

  useEffect(() => {
    console.log(checkedItems, " hereee");
  }, [checkedItems]);

  const handleCheckboxChange = (id: number) => {
    if (!checkedItems.includes(id)) {
      setCheckedItems((prev) => [...prev, id]);
    } else {
      setCheckedItems((prev) => prev.filter((item) => item !== id));
    }
  };

  const handleAccordionToggle = (id: number) => {
    if (!openAccordions.includes(id)) {
      setOpenAccordions((prev) => [...prev, id]);
    } else {
      setOpenAccordions((prev) => prev.filter((item) => item !== id));
    }
  };

  const getAllDescendantIds = (children: GetMenuData[]): number[] => {
    const descendants: number[] = [];
    const findDescendants = (items: GetMenuData[]) => {
      items.forEach((item) => {
        descendants.push(item.id);
        if (item.child && item.child.length > 0) {
          findDescendants(item.child);
        }
      });
    };
    findDescendants(children);
    return descendants;
  };

  const getParentIds = (id: number): number[] => {
    const parentIds: number[] = [];
    let currentId = id;

    const findParent = (items: GetMenuData[], parentId: number) => {
      for (const item of items) {
        if (item.id === currentId) {
          parentIds.push(parentId);
          return true;
        }
        if (item.child) {
          const found = findParent(item.child, item.id);
          if (found) {
            parentIds.push(item.id);
            return true;
          }
        }
      }
      return false;
    };

    findParent(items, 0);
    return parentIds.reverse();
  };

  const handleParentCheckboxChange = (item: GetMenuData) => {
    const allDescendants = getAllDescendantIds(item.child || []);
    const isChecked = checkedItems.includes(item.id);

    if (isChecked) {
      setCheckedItems((prev) =>
        prev.filter((id) => id !== item.id && !allDescendants.includes(id))
      );
    } else {
      setCheckedItems((prev) => [
        ...new Set([...prev, item.id, ...allDescendants]),
      ]);
    }
  };

  const handleChildCheckboxChange = (id: number, parentId: number) => {
    console.log('button clicked')
    const isChecked = checkedItems.includes(id);
    handleCheckboxChange(id);

    const parentIds = getParentIds(id);
    if (!isChecked) {
      setCheckedItems((prev) => [...new Set([...prev, ...parentIds, id])]);
    } else {
      const siblings = items.filter((item) => item.parentId === parentId);
      const allSiblingsUnchecked = siblings.every(
        (sibling) => !checkedItems.includes(sibling.id)
      );

      if (allSiblingsUnchecked) {
        const validParentIds: number[] = [];

        for (let i = parentIds.length - 1; i >= 0; i--) {
          const pId = parentIds[i];
          const foundItems = items.filter((item) => item.id === pId);
          const children = foundItems[0]?.child;

          if (children) {
            const childIds = children.map((child) => child.id);

            const childChecked = childIds.some(
              (childId) => childId !== id && checkedItems.includes(childId)
            );

            if (!childChecked) {
              validParentIds.push(pId);
            }
          }
        }

        setCheckedItems((prev) =>
          prev.filter((itemId) => !validParentIds.includes(itemId))
        );
      }
    }
  };

  const renderItems = (items: GetMenuData[]) => {
    return items.map((item) => {
      const hasChildren = item.hasChild;
      const children = item.child || [];

      const allChildrenChecked = children.every((child) =>
        checkedItems.includes(child.id)
      );
      const someChildrenChecked = children.some((child) =>
        checkedItems.includes(child.id)
      );

      return (
        <div key={item.id}>
          <div className="flex flex-row gap-1 items-center m-2">
            {hasChildren && children.length > 0 && (
              <Accordion
                className="w-full"
                expanded={openAccordions.includes(item.id)}
                onChange={() => handleAccordionToggle(item.id)}
              >
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  className="!p-0"
                >
                  <div className="flex flex-row gap-2 items-center justify-center align-middle">
                    <FormControlLabel
                      control={
                        <Checkbox
                          checked={allChildrenChecked}
                          indeterminate={
                            someChildrenChecked && !allChildrenChecked
                          }
                          onChange={() => handleParentCheckboxChange(item)}
                        />
                      }
                      label={null}
                    />
                    <Typography id="modal-modal-title">
                      {item.linkName}
                    </Typography>
                  </div>
                </AccordionSummary>
                <AccordionDetails className="flex flex-col gap-1">
                  {renderItems(children)}
                </AccordionDetails>
              </Accordion>
            )}
            {!hasChildren && (
              <div className="flex flex-row gap-1 items-center justify-center align-middle">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={checkedItems.includes(item.id)}
                      onChange={() =>
                        handleChildCheckboxChange(item.id, item.parentId)
                      }
                    />
                  }
                  label={null}
                />
                <Typography id="modal-modal-title">{item.linkName}</Typography>
              </div>
            )}
          </div>
        </div>
      );
    });
  };

  return (
    <div className="max-h-[400px] overflow-auto  flex flex-col gap-2">
      {renderItems(items)}
    </div>
  );
};

export default ItemList;

```
my problem is when I click on my check boxes in this modalDrawer my checkedItems doesn't update, but without my modalDrawer its working properly , so what is the problem