toggle styled but no functionality

src/components/Home.jsx

@@ -49,7 +49,7 @@ const Home = () => {
       ) : (
         <LangSelect
           initialAnimation="animate__zoomIn"
-         /*  onMouseEnter={handleMouseEnter} */
+          /*  onMouseEnter={handleMouseEnter} */
           onAnimationEnd={handleAnimationEnd}
         />
       )}
@@ -58,7 +58,7 @@ const Home = () => {
       ) : (
         <Mail
           initialAnimation="animate__zoomIn"
-         /*  onMouseEnter={handleMouseEnter} */
+          /*  onMouseEnter={handleMouseEnter} */
           onAnimationEnd={handleAnimationEnd}
         />
       )}
@@ -67,7 +67,7 @@ const Home = () => {
       ) : (
         <Switch
           initialAnimation="animate__zoomIn"
-         /*  onMouseEnter={handleMouseEnter} */
+          /*  onMouseEnter={handleMouseEnter} */
           onAnimationEnd={handleAnimationEnd}
         />
       )}

src/components/LangSelect.jsx

@@ -1,12 +1,21 @@
 import React from "react";
 import "../css/LangSelect.css";
 import { useState } from "react";
+import Toggle from "./subComponents/Toggle";
 
 const LangSelect = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
-    const [animation, setAnimation] = useState(initialAnimation);
-    return <div className={`langSelect container animate__animated ${animation}`}
-    onMouseEnter={() => onMouseEnter(setAnimation)}
-    onAnimationEnd={() => onAnimationEnd(setAnimation)}>LangSelect</div>;
+  const [animation, setAnimation] = useState(initialAnimation);
+  return (
+    <div
+      className={`langSelect container animate__animated ${animation}`}
+      onMouseEnter={() => onMouseEnter(setAnimation)}
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      <div className="eng">🇬🇧</div>
+      <Toggle />
+      <div className="ger">🇩🇪</div>
+    </div>
+  );
 };
 
 export default LangSelect;

src/components/Switch.jsx

@@ -6,12 +6,8 @@ import "animate.css";
 const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
   const [animation, setAnimation] = useState(initialAnimation);
   return (
-    <div
-      className={`switch container animate__animated ${animation}`}
-      onMouseEnter={() => onMouseEnter(setAnimation)}
-      onAnimationEnd={() => onAnimationEnd(setAnimation)}
-    >
-      Switch
+    <div className={`switch container animate__animated ${animation}`}>
+      switch
     </div>
   );
 };

src/components/mainViews/About.jsx

@@ -36,9 +36,9 @@ const About = () => {
       />
       <LangSelect />
       <Mail />
-      <Switch />
+      <Switch isOn={false} handleToggle={toggleSwitch} />
       <Navigation
-       /*  initialAnimation="animate__bounceInDown"
+      /*  initialAnimation="animate__bounceInDown"
         onMouseEnter={handleMouseEnter}
         onAnimationEnd={handleAnimationEnd} */
       />

src/components/subComponents/Toggle.jsx

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import "../../css/Toggle.css";
+
+const Toggle = () => {
+  const [toggled, setToggled] = useState(false);
+  return (
+    <button
+      className={`toggle-btn ${toggled ? "toggled" : ""}`}
+      onClick={() => setToggled(!toggled)}
+    >
+      <div className="thumb"></div>
+    </button>
+  );
+};
+
+export default Toggle;