Added immer as a dependency, replaced setState with more specific toggleFree function

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"
   }

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>
   );
 };
 

src/types/context.ts

@@ -8,5 +8,5 @@ export interface ContextData {
 
 export type ContextValue = {
   state: ContextData;
-  setState: Dispatch<SetStateAction<ContextData>>;
+  toggleFree: (index: number) => void;
 };