Update ThemeToggle.jsx

Issues:
Input not linked to state: The input checkbox should toggle the dark mode, but it's not currently linked to is DarkMode.
Missing event handler for the checkbox: You need to handle the onChange event to call toggleDarkMode and pass the checked state of the checkbox.
Unnecessary value attribute: The value attribute on the input is unnecessary in this context.
UI feedback: You might want to use is DarkMode to conditionally render a different UI (e.g., applying a dark theme class).

Author: rohhitsingh19

client/src/components/ThemeToggle.jsx

@@ -1,51 +1,51 @@
 import * as React from 'react';
 
-
 const ThemeToggle = () => {
   const [isDarkMode, setDarkMode] = React.useState(false);
 
-  const toggleDarkMode = (checked) => {
-    setDarkMode(checked);
+  const toggleDarkMode = (event) => {
+    setDarkMode(event.target.checked);
   };
 
   return (
     <label className="flex cursor-pointer place-items-center">
-            <input
-              type="checkbox"
-              value="synthwave"
-              className="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1"
-            />
-            <svg
-              className="stroke-base-100 fill-base-100 col-start-1 row-start-1"
-              xmlns="http://www.w3.org/2000/svg"
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <circle cx="12" cy="12" r="5" />
-              <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
-            </svg>
-            <svg
-              className="stroke-base-100 fill-base-100 col-start-2 row-start-1"
-              xmlns="http://www.w3.org/2000/svg"
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-            </svg>
-          </label>
+      <input
+        type="checkbox"
+        checked={isDarkMode}
+        onChange={toggleDarkMode}
+        className="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1"
+      />
+      <svg
+        className="stroke-base-100 fill-base-100 col-start-1 row-start-1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="5" />
+        <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+      </svg>
+      <svg
+        className="stroke-base-100 fill-base-100 col-start-2 row-start-1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
+    </label>
   );
 };
 
-export default ThemeToggle;
+export default ThemeToggle;