diff --git a/package.json b/package.json
index 688457d..4785400 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
+    "immer": "^9.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }
diff --git a/src/context.tsx b/src/context.tsx
index d8a6813..4a966d0 100644
--- a/src/context.tsx
+++ b/src/context.tsx
@@ -1,3 +1,4 @@
+import produce from "immer";
 import { createContext, FC, useContext, useState } from "react";
 import { defaultState } from "./constants";
 import { ContextData, ContextValue } from "./types/context";
@@ -7,8 +8,17 @@ const Context = createContext<ContextValue | undefined>(undefined);
 export const RoomContextProvider: FC = ({ children }) => {
   const [state, setState] = useState<ContextData>(defaultState);
 
+  const toggleFree = (index: number) =>
+    setState(
+      produce((draft) => {
+        draft.char[index].free = !draft.char[index].free;
+      })
+    );
+
   return (
-    <Context.Provider value={{ state, setState }}>{children}</Context.Provider>
+    <Context.Provider value={{ state, toggleFree }}>
+      {children}
+    </Context.Provider>
   );
 };
 
diff --git a/src/types/context.ts b/src/types/context.ts
index 126e87d..485bb1f 100644
--- a/src/types/context.ts
+++ b/src/types/context.ts
@@ -8,5 +8,5 @@ export interface ContextData {
 
 export type ContextValue = {
   state: ContextData;
-  setState: Dispatch<SetStateAction<ContextData>>;
+  toggleFree: (index: number) => void;
 };